@font-face {
  font-family: 'Rubik';
  src: url('/fonts/rubik-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
:root {
    --color-black: #000;
    --color-gray: #f0f0f0;
    --color-white: #fff;
    --color-blue: #1b62b9;
    --color-dark-blue: #144c90;
    --color-red: #e63838;
    --color-dark-red: #a22929;
    --color-yellow: #f78f1e;       /* Narancssárgás árnyalat */
    --color-dark-yellow: #e57400;  /* Sötétebb narancs */
    --color-peach: #fc9;
    --font-family: 'Rubik', sans-serif;
    --font-size-h1: 7.5rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 1.875rem;
    --font-size-h4: 1.375rem;
    --font-size-text: 1.125rem;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --header-text-shadow: -1px -1px 0 var(--color-black), 0 -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px  0 0 var(--color-black), 1px  0 0 var(--color-black), -1px  1px 0 var(--color-black), 0  1px 0 var(--color-black), 1px  1px 0 var(--color-black), -2px -2px 0 var(--color-black), -1px -2px 0 var(--color-black), 0 -2px 0 var(--color-black), 1px -2px 0 var(--color-black), 2px -2px 0 var(--color-black), 2px -1px 0 var(--color-black), 2px  0 0 var(--color-black), 2px  1px 0 var(--color-black), 2px  2px 0 var(--color-black), 1px  2px 0 var(--color-black), 0  2px 0 var(--color-black), -1px  2px 0 var(--color-black), -2px  2px 0 var(--color-black), -2px  1px 0 var(--color-black), -2px  0 0 var(--color-black), -2px -1px 0 var(--color-black), -3px -3px 0 var(--color-black), -2px -3px 0 var(--color-black), 0 -3px 0 var(--color-black), 2px -3px 0 var(--color-black), 3px -3px 0 var(--color-black), 3px -2px 0 var(--color-black), 3px  0 0 var(--color-black), 3px  2px 0 var(--color-black), 3px  3px 0 var(--color-black), 2px  3px 0 var(--color-black), 0  3px 0 var(--color-black), -2px  3px 0 var(--color-black), -3px  3px 0 var(--color-black), -3px  2px 0 var(--color-black), -3px  0 0 var(--color-black), -3px -2px 0 var(--color-black), -3px -3px 0 var(--color-black), -1px -3px 0 var(--color-black), 0 -3px 0 var(--color-black), 1px -3px 0 var(--color-black), 3px -3px 0 var(--color-black), 3px -1px 0 var(--color-black), 3px  0 0 var(--color-black), 3px  1px 0 var(--color-black), 3px  3px 0 var(--color-black), 1px  3px 0 var(--color-black), 0  3px 0 var(--color-black), -1px  3px 0 var(--color-black), -3px  3px 0 var(--color-black), -3px  1px 0 var(--color-black), -3px  0 0 var(--color-black), -3px -1px 0 var(--color-black), -3px 4px 0 var(--color-black), 0px 4px 0 var(--color-black), 3px 4px 0 var(--color-black), -3px 5px 0 var(--color-black), 0px 5px 0 var(--color-black), 3px 5px 0 var(--color-black), -3px 6px 0 var(--color-black), 0px 6px 0 var(--color-black), 3px 6px 0 var(--color-black), -3px 7px 0 var(--color-black), 0px 7px 0 var(--color-black), 3px 7px 0 var(--color-black), -3px 8px 0 var(--color-black), 0px 8px 0 var(--color-black), 3px 8px 0 var(--color-black), -3px 9px 0 var(--color-black), 0px 9px 0 var(--color-black), 3px 9px 0 var(--color-black), -3px 10px 0 var(--color-black), 0px 10px 0 var(--color-black), 3px 10px 0 var(--color-black), -3px 11px 0 var(--color-black), 0px 11px 0 var(--color-black), 3px 11px 0 var(--color-black), -3px 12px 0 var(--color-black), 0px 12px 0 var(--color-black), 3px 12px 0 var(--color-black), -3px 13px 0 var(--color-black), 0px 13px 0 var(--color-black), 3px 13px 0 var(--color-black), -3px 14px 0 var(--color-black), 0px 14px 0 var(--color-black), 3px 14px 0 var(--color-black), -3px 15px 0 var(--color-black), 0px 15px 0 var(--color-black), 3px 15px 0 var(--color-black), -3px 16px 0 var(--color-black), 0px 16px 0 var(--color-black), 3px 16px 0 var(--color-black), -3px 17px 0 var(--color-black), 0px 17px 0 var(--color-black), 3px 17px 0 var(--color-black), -3px 18px 0 var(--color-black), 0px 18px 0 var(--color-black), 3px 18px 0 var(--color-black);
    --link-text-shadow: -1px -1px 0 var(--color-black), 0 -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px  0 0 var(--color-black), 1px  0 0 var(--color-black), -1px  1px 0 var(--color-black), 0  1px 0 var(--color-black), 1px  1px 0 var(--color-black), -2px -2px 0 var(--color-black), -1px -2px 0 var(--color-black), 0 -2px 0 var(--color-black), 1px -2px 0 var(--color-black), 2px -2px 0 var(--color-black), 2px -1px 0 var(--color-black), 2px  0 0 var(--color-black), 2px  1px 0 var(--color-black), 2px  2px 0 var(--color-black), 1px  2px 0 var(--color-black), 0  2px 0 var(--color-black), -1px  2px 0 var(--color-black), -2px  2px 0 var(--color-black), -2px  1px 0 var(--color-black), -2px  0 0 var(--color-black), -2px -1px 0 var(--color-black);
}

/*
 * [Modified] Modern CSS Reset
 * @link https://github.com/hankchizljaw/modern-css-reset
*/
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

html {
    overflow-x: hidden;
    min-width: 413px;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    font-size: 100%;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
}

/* Make images easier to work with */
img {
    display: block;
    max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size-text);
    font-weight: var(--font-weight-regular);
    background-color: var(--color-yellow);
    background-image: radial-gradient(var(--color-dark-yellow) 20%, transparent 0), radial-gradient(var(--color-dark-yellow) 20%, transparent 0);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

:focus {
    outline: 2px dotted;
    outline-offset: 0.125rem;
}

h1,
h2,
h3,
h4 {
    margin-bottom: 0.65em;
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
    text-transform: uppercase;
}

h1 {
    font-size: var(--font-size-h1);
    font-size: clamp(4.25rem, 10vw, var(--font-size-h1));
    color: var(--color-black);
}

h2,
.faq h4 {
    font-size: var(--font-size-h2);
    font-size: clamp(2.375rem, 5vw, var(--font-size-h2));
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

p {
    margin: 0 0 1rem;
}

strong {
    font-weight: var(--font-weight-bold);
}

header div.container a {
    position: unset;
    color: unset;
    font-weight: unset;
    text-decoration-thickness: unset;
    text-underline-offset: unset;
    text-transform: unset;
    text-decoration: none;
}

.language-switcher {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.lang-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 2px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
}

.lang-button:hover {
    border-color: #000;
    background-color: #eee;
}

a {
    position: relative;
    color: var(--color-black);
    font-weight: var(--font-weight-extrabold);
    text-decoration-thickness: 0.125em;
    text-underline-offset: 0.0875em;
    text-transform: uppercase;
}

blockquote {
    position: relative;
    margin: 1rem 0 2rem;
    padding: 0;
    color: var(--color-black);
    border: 0.25rem solid var(--color-black);
    background-color: var(--color-white);
}

blockquote p {
    position: relative;
    margin-bottom: 0;
    padding: 2.5rem 1rem 1.5rem;
    font-size: var(--font-size-h4);
}

blockquote p strong {
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    padding: 0.25em 1em;
    color: var(--color-white);
    font-size: 1rem;
    text-transform: uppercase;
    background-color: var(--color-black);
}

main {
    margin-block-end: 1rem;
}

main h2,
.faq h4,
#contact h2 {
    align-self: center;
    margin-top: -3.75rem;
    margin-bottom: 10rem;
    padding: 0.25em 0.5em;
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-black);
    transform: skewX(-10deg) rotate(-2deg);
    text-align: center;
}

main.blog h2 {
    margin-bottom: 1.5rem;
}

article .container > ul:not(.features) > li + li,
article .container > ol > li + li {
    margin-top: 1rem;
}

article .container * + h2 {
    margin-top: 4rem;
}

nav {
    position: relative;
}

nav ul,
article .container,
aside .container {
    box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}

article .container,
aside .container {
    padding: 1.625rem 1.5rem 2rem;
    border: 0.25rem solid var(--color-black);
    background-color: var(--color-white);
}

@media (min-width: 540px) {
    article .container,
    aside .container {
        padding: 1.75rem 2.5rem 2.5rem;
    }
}

header a:not([class^="link"]):hover,
footer a:not([class^="link"]):hover {
    text-decoration-thickness: 0.1875em;
}

main a:not([class^="link"]):hover,
aside a:not([class^="link"]):hover {
    background-color: var(--color-peach);
}

aside .container {
    display: grid;
    justify-items: center;
}

header,
nav,
article,
aside,
.page-footer {
    width: 100%;
    max-width: 65rem;
    margin: 0 auto;
    padding: 0.5rem;
}

@media (min-width: 540px) {
    header,
    nav,
    article,
    .page-footer {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

main:focus {
    outline: none;
}

main .container h3 {
    margin-top: 2rem;
}

main article + article,
section + section,
aside + aside {
    margin-top: 4rem;
}

article section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

header {
    padding-bottom: 4rem;
    color: var(--color-black);
    text-align: center;
}

header h1 {
    position: relative;
    margin-bottom: 0;
    padding: 5rem 0 0 0;
    color: var(--color-white);
    font-style: italic;
    letter-spacing: -0.05em;
    text-shadow: var(--header-text-shadow);
    white-space: pre-wrap;
}

@media (min-width: 600px) {
}

header h2, slogan {
    max-width: 30ch;
    font-size: clamp(1.875rem, 4vw, var(--font-size-h2));
    font-weight: var(--font-weight-semibold);
    margin: 0.65rem auto 0.65em;
    color: var(--color-white);
    font-style: italic;
    letter-spacing: -0.05em;
    text-shadow: var(--header-text-shadow);
    white-space: pre-wrap;
}

header p {
    margin-bottom: 2rem;
}

nav ul {
    margin: 0;
    padding: 0.125rem;
    list-style: none;
    font-size: 1.25rem;
    border: 0.25rem solid var(--color-black);
    background-color: var(--color-red);
}

@media (min-width: 540px) {
    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

nav ul li {
    margin: 0.375rem 0.375rem 0.5rem;
    text-align: center;
}

@media (min-width: 540px) {
    nav ul li {
        flex: 1 0 45%;
    }
}

@media (min-width: 600px) {
    nav ul li {
        flex: 1 0 30%;
    }
}

@media (min-width: 940px) {
    nav ul li {
        flex: 1 0 auto;
    }
}

nav ul a {
    position: relative;
    display: block;
    padding: 0.5em;
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    border: 0.1875rem solid var(--color-red);
    border-radius: 2em;
    text-decoration: none;
}

nav ul a:hover {
    background-color: var(--color-dark-red);
    border-color: var(--color-black);
}

nav ul a:focus {
    background-color: var(--color-dark-red);
}

#about section:nth-child(2), #prices section:nth-child(2) {
    margin-top: 6rem;
}

#about section:nth-child(2) ul, #prices section:nth-child(2) ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0 2rem;
    padding: 0;
    list-style: none;
}

#about section:nth-child(2) ul li, #prices section:nth-child(2) ul li {
    position: relative;
    margin: 0.25em 0.25em 1em;
    padding: 0.5em 0.75em;
    color: var(--color-white);
    border-radius: 0.5em;
    background-color: var(--color-black);
}

#about section:nth-child(2) ul li::before, #prices section:nth-child(2) ul li::before {
    position: absolute;
    content: '';
    left: 0.75em;
    bottom: -0.5em;
    width: 0;
    height: 0;
    border-top: 5px solid var(--color-black);
    border-left: 15px solid var(--color-black);
    border-right: 5px solid transparent;
    border-bottom: 10px solid transparent;
}

#guidelines p:nth-of-type(1),
#about p:nth-of-type(1),
#prices p:nth-of-type(1) {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
}

#guidelines .container > a {
    align-self: center;
    margin-top: 1rem;
}

#about section,
#prices section {
    padding-bottom: 1rem;
    border-bottom: none;
    background-color: var(--color-white);
}

#about section:nth-child(2),
#prices section:nth-child(2) {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

#about ol,
#prices ol {
    position: relative;
    counter-reset: contribute-counter;
    padding-left: 0;
    list-style: none;
}

#about ol li,
#prices ol li {
    position: relative;
    counter-increment: contribute-counter;
    padding-left: 3rem;
}

#about ol li::before,
#prices ol li::before {
    position: absolute;
    content: counter(contribute-counter);
    top: -0.1875rem;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    color: var(--color-yellow);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    border-radius: 50%;
    background-color: var(--color-black);
    text-align: center;
}

#files .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-top: none;
}

#files .container h3 {
    min-width: 100%;
}

#files .container a {
    font-size: 1.5rem;
}

#files .container a,
.page-footer .container ul li {
    margin: 0.5rem;
}

.features {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.features li {
    position: relative;
    padding: 1rem 0;
    text-align: center;
}

.features li > span {
    display: block;
}

.features li > span span {
    display: block;
}

.features li > span span:nth-child(2) {
    position: relative;
}

.faq ul {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.faq ul li {
    display: flex;
    padding: 0.45em;
}

.faq ul li span:nth-child(1) {
    margin-right: 0.5em;
    font-weight: var(--font-weight-bold);
}

.page-footer {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.page-footer .container > :last-child {
    margin-bottom: 0;
}

.page-footer p {
    max-width: 75ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.page-footer p a {
    color: inherit;
}

.page-footer ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.skip-link {
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    color: var(--color-white);
    font-size: 1.125rem;
    background-color: var(--color-blue);
    text-decoration: none;
    overflow: hidden;
}

.skip-link:focus {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    margin: 0.5em;
    color: var(--color-gray);
}

.skip-link,
nav ul,
[class^="link"],
.faq .container > a {
    border-radius: 2em;
    box-shadow: inset 0.1875rem 0.1875rem var(--color-white), inset -0.1875rem -0.1875rem var(--color-black);
}

.skip-link,
nav ul a,
[class^="link"],
.faq .container > a {
    font-size: 1.25rem;
    text-shadow: var(--link-text-shadow);
}

[class^="link"],
.faq .container > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background-color: var(--color-blue);
}

.skip-link:focus,
[class^="link"],
.faq .container > a {
    padding: 0.875em 1em;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border: 0.1875rem solid var(--color-black);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.skip-link:focus,
[class^="link"]:hover,
[class^="link"]:focus,
.faq .container > a:hover,
.faq .container > a:focus {
    background-color: var(--color-dark-blue);
}

nav ul a:hover,
nav ul a:focus,
[class^="link"]:hover,
[class^="link"]:focus,
.faq .container > a:hover,
.faq .container > a:focus {
    color: var(--color-gray);
    transform: translate(0, 0.025em);
    box-shadow: inset 0.125em 0.125em var(--color-black);
}

.skip-link:focus,
nav ul a:focus,
[class^="link"]:focus,
.faq .container > a:focus {
    border-color: var(--color-white);
    box-shadow: 0 0 0 0.1875rem var(--color-black);
    outline: 2px solid transparent;
    outline-offset: 4px;
}

.link-github span {
    display: block;
    height: 1em;
}

.link-github svg {
    position: relative;
    display: inline-block;
    height: 1em;
    margin-right: 0.375em;
    fill: currentColor;
    stroke: var(--color-black);
    stroke-width: 3px;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 800px;
    padding: 2rem;
    margin: 2rem auto;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}


form label {
    font-weight: bold;
    color: var(--color-black, #000);
}

form input,
form textarea {
    padding: 0.75em 1em;
    border: 2px solid #000;
    border-radius: 0.5rem;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

form textarea {
    resize: vertical;
    min-height: 120px;
}

form button {
    padding: 1em;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    border: none;
    border-radius: 0.5rem;
    background-color: #000;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s ease;
}

form button:hover {
    background-color: #ffcc00;
    color: #000;
}

.g-recaptcha {
    margin-top: 1rem;
}

#dzsoni-sticky {
    position: absolute;
    top: -500px;
    left: -10%;
    margin-left: 1rem;
    z-index: -1;
    width: 430px;
    height: auto;
    transform: scaleX(-1);
}

#dzsoni-sticky img {
    width: 100%;
    height: auto;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

#dzsoni-sticky:hover {
    transform: scale(1.05) rotate(-2deg);
    cursor: pointer;
}

#dzsoni-sticky-services {
    left: calc(100% - 300px);
    bottom: 10%;
}

#dzsoni-sticky-prices {
    left: calc(100% - 320px);
    bottom: 35%;
}

div#dzsoni-sticky-about {
    left: calc(100% - 320px);
    bottom: 25%;
}

div#dzsoni-sticky-why-us {
    top: 35%;
    left: calc(100% - 250px);
}

div#dzsoni-sticky-faq {
    top: -15%;
    left: calc(100% - 308px);
}

div#dzsoni-sticky-impressum {
    top: -15%;
    left: calc(100% - 310px);
}

div#dzsoni-sticky-contact {
    top: -15%;
    left: calc(100% - 250px);
}

div#dzsoni-sticky-blog {
    top: 0;
    left: 95%;
}

.dzsoni-in-da-house {
    position: relative;
    transform: translate(30%, -30%);
    z-index: 0;
    width: 300px;
    height: auto;
    transition: transform 0.3s ease;
    top: 58px;
    left: calc(100% - 370px);
}

.dzsoni-in-da-house img {
    width: 100%;
    height: auto;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

.dzsoni-in-da-house:hover {
    transform: translate(30%, -30%) scale(1.05) rotate(-2deg);
    cursor: pointer;
}

nav ul li .speech-bubble {
    right: unset;
    margin-left: -7%;
    margin-top: -8%;
}

/* Tail */
nav ul li .speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fffbea; /* buborék háttérszíne */
    z-index: 9;
}

nav ul li .speech-bubble::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid #000; /* buborék keretszíne */
    z-index: 8;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 30%;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #fffbea; /* a buborék háttérszíne */
    z-index: 9;
}

.speech-bubble::before {
    content: '';
    position: absolute;
    right: -23px;
    top: 30%;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 23px solid #000; /* a buborék keretszíne */
    z-index: 8;
}

.speech-bubble {
    position: absolute;
    top: 3.5rem;
    right: 80%;
    background: #fffbea;
    border: 3px solid #000;
    border-radius: 10px;
    padding: 0.75rem 2rem;
    max-width: 480px;
    font-family: 'Comic Sans MS', 'Arial', sans-serif;
    font-size: 0.95rem;
    color: #000;
    z-index: 10;
    box-shadow: 4px 4px 0 #000;
    display: none;
}

div.dzsoni-in-da-house,
div.dzsoni-in-da-house:hover {
    position: absolute;
    bottom: 100%;
    transform: translateY(30%);
    margin-bottom: -150px;
    top: -40%;
    left: 80%;
}

div.dzsoni-in-da-house:hover {
    rotate: -5deg;
}

@media (max-width: 1024px) {
    .dzsoni-in-da-house, #dzsoni-sticky-prices {
        position: relative !important;
        left: unset !important;
        bottom: unset !important;
        margin: 0 auto 0 auto;
        z-index: unset !important;
        transform: unset !important;
        margin-bottom: unset !important;
    }

    #dzsoni-sticky {
        width: 300px !important;
        top: -360px !important;
        left: 50px !important;
        margin: auto !important;
        transition: unset !important;
    }

    #dzsoni-sticky-contact {
        top: 45px !important;
    }

    #dzsoni-sticky-impressum {
        top: 50px !important;
    }

    main h2, .faq h4, #contact h2 {
        margin-bottom: 1rem !important;
    }

    .speech-bubble {
        top: -3.5rem;
        right: 50%;
    }
}

aside, article {
    position: relative;
}

.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .price-grid {
        grid-template-columns: 1fr;
    }
}

.price-item {
    background: #fff;
    border: 2px solid #000;
    border-radius: 10px;
    box-shadow: 4px 4px 0 #000;
    padding: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
    position: relative;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 100px;
}

.price-item:hover {
    transform: rotate(-1.5deg) scale(1.04);
    box-shadow: 6px 6px 0 #000;
    background-color: #fff3b0;
    z-index: 10;
    cursor: pointer;
}

.price-item strong {
    display: block;
    font-weight: 900;
    margin-bottom: 0.25rem;
    color: black;
}

.price-item span {
    display: block;
    font-weight: 500;
    color: #222;
}

.contact-bubble {
    border: 4px solid #222;
    border-radius: 1rem;
    box-shadow: 6px 6px 0 #000;
    padding: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
    transition: transform 0.2s ease;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

.contact-bubble:hover {
    transform: rotate(-1deg) scale(1.02);
    background: #fff4a3;
}

.contact-bubble strong {
    display: block;
    color: #000;
    margin-bottom: 0.2rem;
}

.contact-bubble a {
    color: #000;
    font-weight: bold;
    text-decoration: underline dotted;
}

.contact-bubble a:hover {
    color: #d40000;
    text-decoration-style: solid;
}

.mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #222;
    color: #fff;
    text-align: center;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 9999;
    text-decoration: none;
    border-top: 3px solid #ffcc00;
}

@media screen and (max-width: 768px) {
    .mobile-cta {
        display: block;
    }
}

.fixed-desktop-cta {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: none;
}

@media screen and (min-width: 769px) {
    .fixed-desktop-cta {
        display: inline-block;
    }
}

main.blog blockquote {
    width: 100%;
}

/* --- Mobile performance patch --- */
@media (max-width: 768px) {
    html {
        overflow-x: hidden;
        min-width: 0;
    }

    body {
        /* a teljes oldalas pöttyös háttér mobilon drágább festés */
        background-image: none;
        background-size: auto;
        background-position: 0 0;
    }

    :root {
        /* a brutál text-shadow mobilon túl drága */
        --header-text-shadow: 2px 2px 0 var(--color-black);
        --link-text-shadow: none;
    }

    h1,
    header p,
    .link-call,
    .link-email {
        text-shadow: none !important;
    }

    /* kevesebb festés és kompozitálás az above-the-fold részen */
    nav ul,
    article .container,
    aside .container,
    form,
    .price-item,
    .contact-bubble,
    .speech-bubble {
        box-shadow: none !important;
    }

    .lang-button,
    form button,
    .price-item,
    .contact-bubble,
    .dzsoni-in-da-house,
    #dzsoni-sticky {
        transition: none !important;
    }

    #dzsoni-sticky img,
    .dzsoni-in-da-house img {
        filter: none !important;
    }

    .price-item:hover,
    .contact-bubble:hover,
    .dzsoni-in-da-house:hover,
    #dzsoni-sticky:hover {
        transform: none !important;
        rotate: 0deg !important;
        box-shadow: none !important;
    }

    /* első képernyő gyorsítása */
    header,
    nav,
    article,
    aside,
    .page-footer {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    main h2,
    .faq h4,
    #contact h2 {
        transform: none;
        margin-top: 0;
        margin-bottom: 1rem !important;
    }

    /* az első viewport után jövő blokkok ne renderelődjenek azonnal */
    article:not(:first-of-type),
    aside:not(:first-of-type),
    section:not(:first-of-type) {
        content-visibility: auto;
        contain-intrinsic-size: 800px;
    }

    /* sticky CTA maradhat, de legyen könnyebb */
    .mobile-cta {
        box-shadow: none;
        border-top-width: 2px;
    }
}