body {
margin: 0;
padding: 0;
background: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Helvetica, Arial, sans-serif;
color: #111111;
overflow-x: hidden;
}

a {
color: inherit;
text-decoration: none;
}

.language-page {
min-height: 100vh;
background:
linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 58%, #eeeeef 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.language-selector {
width: 100%;
max-width: 780px;
padding: 52px 28px 78px;
box-sizing: border-box;
text-align: center;
}

.language-logo {
width: 170px;
height: auto;
display: block;
margin: 0 auto 56px;
animation: logoFloat 1.35s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

@keyframes logoFloat {
0% { opacity: 0; transform: translateY(22px) scale(0.98); filter: blur(10px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.language-title {
position: relative;
height: 72px;
font-size: 58px;
font-weight: 800;
letter-spacing: -2.4px;
line-height: 1;
margin: 0 0 18px;
}

.language-title span {
position: absolute;
left: 0;
right: 0;
top: 0;
opacity: 0;
animation: languageSwitch 9s infinite;
}

.language-title span:nth-child(2) { animation-delay: 3s; }
.language-title span:nth-child(3) { animation-delay: 6s; }

.language-subtitle {
position: relative;
height: 34px;
font-size: 23px;
color: #6e6e73;
margin: 0 0 42px;
}

.language-subtitle span {
position: absolute;
left: 0;
right: 0;
top: 0;
opacity: 0;
animation: languageSwitch 9s infinite;
}

.language-subtitle span:nth-child(2) { animation-delay: 3s; }
.language-subtitle span:nth-child(3) { animation-delay: 6s; }

@keyframes languageSwitch {
0% { opacity: 0; transform: translateY(12px); }
8% { opacity: 1; transform: translateY(0); }
28% { opacity: 1; transform: translateY(0); }
36% { opacity: 0; transform: translateY(-12px); }
100% { opacity: 0; transform: translateY(-12px); }
}

.language-buttons {
display: flex;
justify-content: center;
gap: 12px;
}

.language-button {
min-width: 150px;
padding: 12px 22px;
border: 1.5px solid rgba(17,17,17,0.86);
border-radius: 999px;
font-size: 15px;
font-weight: 600;
box-sizing: border-box;
box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset;
transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.language-button:hover {
background: #111111;
color: #ffffff;
border-color: #111111;
transform: translateY(-2px);
}

.language-notice {
position: fixed;
bottom: 26px;
font-size: 13px;
line-height: 1.45;
color: #7a7a80;
}

.language-notice-de {
left: 34px;
}

.language-notice-pt {
left: 50%;
transform: translateX(-50%);
}

.language-notice-en {
right: 34px;
}

.topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 58px 64px 0;
background: rgba(255,255,255,0.88);
backdrop-filter: blur(24px);
z-index: 100;
box-sizing: border-box;
}

.nav-left,
.nav-right {
display: flex;
align-items: center;
gap: 30px;
}

.nav-left a,
.nav-right a {
font-size: 15px;
font-weight: 600;
}

.center-logo-link {
position: absolute;
left: 50%;
top: 28px;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
}

.center-logo {
width: 160px;
height: auto;
display: block;
}

.mobile-menu-toggle,
.mobile-menu-button,
.mobile-menu {
display: none;
}

.home {
min-height: 100vh;
}

.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 190px 24px 116px;
box-sizing: border-box;
background:
linear-gradient(180deg, #ffffff 0%, #fbfbfd 54%, #f4f4f6 100%);
}

h1 {
font-size: 82px;
margin: 0;
letter-spacing: -4px;
line-height: 1;
color: #111111;
}

.animated-title {
animation: titleReveal 1.45s cubic-bezier(0.19, 1, 0.22, 1) forwards;
opacity: 0;
transform: translateY(18px);
}

@keyframes titleReveal {
0% { opacity: 0; transform: translateY(18px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-subtitle {
font-size: 30px;
color: #666666;
margin-top: 25px;
animation: subtitleReveal 1.35s cubic-bezier(0.19, 1, 0.22, 1) forwards;
opacity: 0;
animation-delay: 0.28s;
}

@keyframes subtitleReveal {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}

.main-button {
margin-top: 45px;
background: #111111;
color: white;
padding: 17px 32px;
border-radius: 999px;
font-size: 20px;
font-weight: 600;
transition: background 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
animation: buttonReveal 1.35s cubic-bezier(0.19, 1, 0.22, 1) forwards;
opacity: 0;
animation-delay: 0.48s;
box-shadow: 0 14px 34px rgba(0,0,0,0.14);
}

@keyframes buttonReveal {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: translateY(0); }
}

.main-button:hover {
background: #333333;
transform: translateY(-2px);
box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.about-hero {
display: grid;
grid-template-columns: 430px 720px;
align-items: center;
justify-content: center;
gap: 95px;
padding: 210px 90px 100px;
max-width: 1500px;
margin: 0 auto;
box-sizing: border-box;
min-height: 100vh;
}

.about-image {
width: 430px;
display: flex;
align-items: center;
justify-content: center;
}

.about-image img {
width: 430px;
height: auto;
border-radius: 32px;
display: block;
}

.about-content {
max-width: 720px;
}

.about-content h1 {
font-size: 64px;
margin: 0 0 34px;
letter-spacing: -3px;
line-height: 1;
}

.about-content p {
font-size: 21px;
line-height: 1.62;
color: #444444;
margin: 0 0 22px;
}

.page-hero {
padding: 210px 40px 70px;
text-align: center;
}

.page-hero h1 {
font-size: 86px;
letter-spacing: -4px;
}

.page-hero p {
font-size: 28px;
color: #666666;
max-width: 860px;
margin: 28px auto 0;
line-height: 1.45;
}

.cards {
max-width: 1200px;
margin: 0 auto;
padding: 40px 40px 110px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}

.support-cards {
grid-template-columns: repeat(2, 1fr);
max-width: 920px;
}

.card {
background: #f5f5f7;
border-radius: 30px;
padding: 38px;
min-height: 250px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.card h2 {
font-size: 32px;
letter-spacing: -1.4px;
margin: 0 0 18px;
}

.card p {
font-size: 20px;
line-height: 1.55;
color: #555555;
margin: 0;
}

.card-link {
margin-top: 28px;
color: #0066cc;
font-size: 18px;
font-weight: 600;
}

.knowledge-overview {
max-width: 1050px;
margin: 0 auto;
padding: 40px 40px 120px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}

.big-card {
background: #f5f5f7;
border-radius: 34px;
padding: 42px;
min-height: 360px;
box-sizing: border-box;
color: #111111;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: 0.2s;
}

.big-card:hover {
transform: translateY(-4px);
background: #eeeeef;
}

.big-card h2 {
font-size: 40px;
letter-spacing: -1.8px;
line-height: 1.05;
margin: 0 0 24px;
}

.big-card p {
font-size: 21px;
line-height: 1.55;
color: #555555;
margin: 0;
}

.big-card span {
font-size: 19px;
font-weight: 700;
color: #0066cc;
margin-top: 34px;
}

.group-label {
font-size: 16px;
font-weight: 700;
color: #777777;
margin: 0 0 24px;
}

@media (max-width: 768px) {

body {
overflow-x: hidden;
}

.language-page {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 22px 22px 28px;
box-sizing: border-box;
}

.language-selector {
padding: 28px 0 14px;
max-width: 390px;
}

.language-logo {
width: 132px;
margin-bottom: 38px;
}

.language-title {
height: 54px;
font-size: 42px;
letter-spacing: -1.3px;
line-height: 1;
margin-bottom: 14px;
}

.language-subtitle {
height: 28px;
font-size: 18px;
margin-bottom: 24px;
}

.language-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
}

.language-button {
width: 100%;
max-width: 292px;
padding: 12px 18px;
font-size: 17px;
border-radius: 999px;
}

.language-notice {
position: static;
font-size: 11.5px;
line-height: 1.45;
text-align: center;
max-width: 310px;
margin: 4px auto 0;
color: #6e6e73;
transform: none;
}

.language-notice-de {
margin-top: 12px;
}

.topbar {
height: 96px;
padding: 28px 24px 0;
align-items: flex-start;
}

.center-logo-link {
top: 20px;
}

.center-logo {
width: 118px;
}

.nav-left,
.nav-right {
display: none;
}

.mobile-menu-toggle {
display: none;
}

.mobile-menu-button {
display: flex;
width: 42px;
height: 42px;
position: fixed;
top: 28px;
right: 24px;
z-index: 300;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 7px;
cursor: pointer;
}

.mobile-menu-button span {
display: block;
width: 28px;
height: 2px;
background: #111111;
border-radius: 999px;
}

.mobile-menu {
display: flex;
position: fixed;
top: 82px;
left: 18px;
right: 18px;
background: rgba(255,255,255,0.96);
backdrop-filter: blur(28px);
border-radius: 26px;
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
z-index: 250;
padding: 22px;
box-sizing: border-box;
flex-direction: column;
gap: 18px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: 0.2s ease;
}

.mobile-menu a {
font-size: 21px;
font-weight: 700;
letter-spacing: -0.4px;
}

.mobile-menu-toggle:checked ~ .mobile-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.hero {
min-height: 100svh;
padding: 150px 24px 90px;
}

.animated-title {
animation: none;
opacity: 1;
transform: none;
filter: none;
}

h1 {
font-size: 52px;
letter-spacing: -2px;
line-height: 1.02;
}

.hero-subtitle {
font-size: 22px;
margin-top: 18px;
animation: none;
opacity: 1;
}

.main-button {
font-size: 18px;
padding: 16px 28px;
margin-top: 34px;
animation: none;
opacity: 1;
}

.about-hero {
display: flex;
flex-direction: column;
padding: 130px 24px 70px;
gap: 34px;
text-align: center;
min-height: auto;
}

.about-image {
width: 100%;
max-width: 260px;
}

.about-image img {
width: 100%;
max-width: 260px;
border-radius: 28px;
}

.about-content {
max-width: 100%;
}

.about-content h1 {
font-size: 42px;
letter-spacing: -1.8px;
line-height: 1.05;
margin-bottom: 24px;
}

.about-content p {
font-size: 18px;
line-height: 1.62;
margin-bottom: 18px;
}

.page-hero {
padding: 130px 24px 44px;
}

.page-hero h1 {
font-size: 50px;
letter-spacing: -2px;
}

.page-hero p {
font-size: 20px;
line-height: 1.45;
margin-top: 18px;
}

.cards {
grid-template-columns: 1fr;
padding: 24px 24px 70px;
gap: 20px;
}

.support-cards {
grid-template-columns: 1fr;
}

.card {
padding: 28px;
min-height: 210px;
border-radius: 28px;
}

.card h2 {
font-size: 28px;
letter-spacing: -1px;
}

.card p {
font-size: 17px;
line-height: 1.55;
}

.knowledge-overview {
grid-template-columns: 1fr;
padding: 24px 24px 70px;
gap: 20px;
}

.big-card {
padding: 30px;
min-height: 280px;
border-radius: 30px;
}

.big-card h2 {
font-size: 32px;
letter-spacing: -1.2px;
line-height: 1.08;
}

.big-card p {
font-size: 17px;
line-height: 1.55;
}

.big-card span {
font-size: 17px;
}
}