* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  scroll-behavior: smooth;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:root {
  /* Farbschema */
  --accent: #12f7ff;
  --raw-seinna: var(--accent);
  --sizzling-sunrise: hsl(24, 74%, 58%); /* ungenutzt, gelassen */
  --scarlet: hsl(13, 96%, 47%);          /* ungenutzt, gelassen */
  --main-color: var(--accent);
  --white: hsl(0, 0%, 100%);
  --black: #000;

  --text-color: #e6e7eb;
  --muted: rgba(255,255,255,.72);
  --hover-color: var(--accent);

  --bg-color: #000027; 
  --secon-bg-color: #000027;

  --big-font: 2.5rem;
  --norma-font: 2rem;

  --neon-box-shadow: 0 0 .5rem var(--accent);

  --h2-font: 3rem;

  /* korrigierter Neon-Textschatten */
  --font-neon-text-shadow:
    0 0 10px rgba(18,247,255,.30),
    0 0 20px rgba(18,247,255,.30),
    0 0 30px rgba(18,247,255,.28),
    0 0 40px rgba(18,247,255,.24),
    0 0 70px rgba(18,247,255,.18),
    0 0 100px rgba(18,247,255,.12),
    0 0 150px rgba(18,247,255,.08);
}

@font-face {
  font-family: 'iron';
  src: url('/fonts/Scratchy\ Lemon.ttf') format('truetype');
}

body {
  font-family: 'iron';
  background-color: var(--bg-color);
  color: var(--text-color);
}

.home {
  width: 100%;
  min-height: min(100vh, 100svh);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  justify-items: start;
  padding: clamp(24px, 5vw, 64px) clamp(16px, 5vw, 64px);
  margin-inline: auto;
  max-width: 1200px;
  z-index: 21;
}

@media (max-width: 900px) {
  .home {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .home-content { justify-self: center; text-align: center; }
  .change-text h3 { justify-content: center; }
}

.home-content {
  max-width: 700px;
  text-align: left;
  justify-self: start;
}

.home-content h1 {
  font-weight: 700;
  animation: slideRight 1.2s;
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem);
  text-shadow: var(--font-neon-text-shadow);
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.change-text {
  font-weight: 600;
  animation: slideRight 1.4s;
  font-size: clamp(1.1rem, 1rem + 1.6vw, 2rem);
  text-shadow: var(--font-neon-text-shadow);
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.change-text h3 {
  display: inline-flex;
  margin: 0;
  vertical-align: top;
}

.change-text h3 .word {
  position: absolute;
  display: flex;
  opacity: 0;
}

.change-text h3 .word .letter {
  transform-origin: center center 25px;
}

.change-text h3 .word .letter.out {
  transform: rotateX(90deg);
  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
}

.change-text h3 .word .letter.in {
  transition: 0.38s ease;
}

.change-text .word .letter.behind {
  transform: rotateX(-90deg);
}

.home-content p {
  color: var(--muted);
  line-height: 1.7;
  animation: slideRight 1.6s;
  font-size: clamp(1rem, .9rem + .7vw, 1.2rem);
}

.info-box {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  margin: 1rem 0 2rem;
  animation: slideRight 7s;
}

.info-box .h5 {
  font-weight: 600;
  color: var(--text-color);
  font-size: 1rem;
}

.info-box span {
  font-size: 0.9rem;
  color: var(--muted);
}

.btn-box {
  display: flex;
  justify-content: space-between;
  width: 320px;
  height: 45px;
}

.btn-box a.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 100%;
  background: var(--hover-color);
  color: var(--bg-color);
  font-size: 1rem;
  letter-spacing: 1px;
  font-weight: 600;
  transition: 0.6s;
  box-shadow: var(--neon-box-shadow);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  z-index: 1; /* nicht negativ, damit klickbar */
}

a.btn:hover {
  color: var(--hover-color);
}

a.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg-color);
  width: 0%;
  height: 100%;
  z-index: -1;
  transition: 0.4s;
}

a.btn:hover::before {
  width: 100%;
}

.social-icons {
  display: flex;
  justify-content: flex-start;
  width: 220px;
  height: 40px;
  animation: slideRight 7s;
  gap: 20px;
}

.social-icons a {
  display: inline-flex;
  width: 50px;
  height: 100%;
  justify-content: center;
  align-items: center;
  background: var(--bg-color);
  color: var(--hover-color);
  border: 2px solid var(--hover-color);
  transition: 0.6s;
  box-shadow: 0 0 .3rem var(--accent);
  border-radius: 5px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.social-icons a i {
  font-size: 1rem;
}

.social-icons a:hover {
  color: var(--bg-color);
}

.social-icons a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background: var(--hover-color);
  transition: 0.6s;
  z-index: -1;
}

.social-icons a:hover::before {
  width: 100%;
}

.home-image {
  position: relative;
  display: grid;
  place-items: center;
  animation: slideLeft 1.2s;
  justify-self: stretch;
}

.img-box {
  width: 100%;
  text-align: center;
}

.img-box img {
  width: min(100%, 560px);
  max-height: clamp(260px, 45vh, 560px);
  object-fit: contain;
  margin-inline: auto;
  display: block;
}

.liquid-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.liquid-shape:nth-child(2) {
  filter: blur(50px);
}

/* Animations */
@keyframes slideRight{
  0%{ transform: translateX(-100px); opacity: 0; }
  100%{ transform: translateX(0px); opacity: 1; }
}

@keyframes slideLeft{
  0%{ transform: translateX(100px); opacity: 0; }
  100%{ transform: translateX(0px); opacity: 1; }
}

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

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

/*---------break points */

/* Smartphones */

/* Deko Wolken (Farben bleiben aus Variablen) */
.banner212 {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: bottom;
}
.banner212 .clouds212{
  position: absolute; top:0; left:0; height:100%; width:100%; overflow:hidden;
}
.banner212 .clouds212 img{
  position: absolute; bottom: 0; max-width: 100%;
  -webkit-animation: animate212 calc(8s * var(--i)) linear infinite;
          animation: animate212 calc(8s * var(--i)) linear infinite;
}
@-webkit-keyframes animate212 {
  0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
  100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@keyframes animate212 {
  0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
  100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

.banner414 { position: relative; width: 100%; background-size: cover; background-position: bottom; }
.banner414 .clouds414{ position:absolute; top:0; left:0; height:100%; width:100%; overflow:hidden; }
.banner414 .clouds414 img{
  position: absolute; bottom:0; max-width:100%;
  -webkit-animation: animate414 calc(8s * var(--i)) linear infinite;
          animation: animate414 calc(8s * var(--i)) linear infinite;
}
@-webkit-keyframes animate414 {
  0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  100% { -webkit-transform: translateY(100%); transform: translateY(100%); }
}
@keyframes animate414 {
  0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
  100% { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

/* Preloader */
#preloader{
  position: fixed; left:0; top:0; width:100%; height:100%; z-index:9999;
  background: var(--bg-color);
  display:flex; align-items:center; justify-content:center;
}
.loader{ position:relative; width:120px; height:120px; }
.loader span{
  position:absolute; top:0; left:0; width:100%; height:100%;
  -webkit-transform: rotate(calc(18deg * var(--i)));
          transform: rotate(calc(18deg * var(--i)));
}
.loader span::before{
  content:''; position:absolute; top:0; left:0; width:15px; height:15px; border-radius:50%;
  background: var(--accent);
  -webkit-box-shadow:
    0 0 10px var(--accent),
    0 0 20px var(--accent),
    0 0 40px var(--accent),
    0 0 60px var(--accent),
    0 0 80px var(--accent),
    0 0 100px var(--accent);
          box-shadow:
    0 0 10px var(--accent),
    0 0 20px var(--accent),
    0 0 40px var(--accent),
    0 0 60px var(--accent),
    0 0 80px var(--accent),
    0 0 100px var(--accent);
  -webkit-animation: loadingAnimation 2s linear infinite;
          animation: loadingAnimation 2s linear infinite;
  -webkit-animation-delay: calc(.1s * var(--i));
          animation-delay: calc(.1s * var(--i));
}

@-webkit-keyframes bgAnimation {
  0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); }
  100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }
}
@keyframes bgAnimation {
  0% { -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); }
  100% { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }
}

@-webkit-keyframes loadingAnimation {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
}
@keyframes loadingAnimation {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
}

@media (max-width: 1200px) {
  body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

/* Kreis-Deko – auf Akzentfarbe umgestellt */
.circlecc {
  position: relative;
  width: 600px;
  height: 600px;
  -webkit-filter: url(#wavy) blur(1px);
          filter: url(#wavy) blur(1px);
}

@media (max-width: 600px) {
  .circlecc { width: 500px; height: 500px; }
}
@media (max-width: 480px) {
  .circlecc { width: 400px; height: 400px; }
}

.circlecc:nth-child(2)::before { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; }

.circlecc::before {
  content: '';
  position: absolute;
  top: 100px; left: 100px; right: 100px; bottom: 100px;
  border: 20px solid rgba(255,255,255,.9);
  border-radius: 50%;
  -webkit-box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent);
          box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent);
  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0002);
  -webkit-animation: aaaanimate 5s linear infinite;
          animation: aaaanimate 5s linear infinite;
}

.circlecc::after {
  content: '';
  position: absolute;
  top: 100px; left: 100px; right: 100px; bottom: 100px;
  border: 20px solid rgba(255,255,255,.85);
  border-radius: 50%;
  -webkit-box-shadow: 0 0 10px rgba(255,255,255,.8), inset 0 0 20px rgba(255,255,255,.8);
          box-shadow: 0 0 10px rgba(255,255,255,.8), inset 0 0 20px rgba(255,255,255,.8);
}

@-webkit-keyframes aaaanimate {
  0%   { -webkit-box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); -webkit-filter: hue-rotate(0deg); filter: hue-rotate(0deg); }
  50%  { -webkit-box-shadow: 0 0 80px var(--accent), inset 0 0 80px var(--accent); box-shadow: 0 0 80px var(--accent), inset 0 0 80px var(--accent); }
  100% { -webkit-box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }
}
@keyframes aaaanimate {
  0%   { -webkit-box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); filter: hue-rotate(0deg); }
  50%  { -webkit-box-shadow: 0 0 80px var(--accent), inset 0 0 80px var(--accent); box-shadow: 0 0 80px var(--accent), inset 0 0 80px var(--accent); }
  100% { -webkit-box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); box-shadow: 0 0 50px var(--accent), inset 0 0 50px var(--accent); filter: hue-rotate(360deg); }
}

/* SVG helper unsichtbar */
.ssvg { width: 0; height: 0; }

@media (min-width: 901px) {
  .home {
    grid-template-columns: 1fr 1fr;
  }
  .home-content {
    grid-column: 1;
    text-align: left;
    justify-self: start;
  }
  .home-image {
    grid-column: 2;
    justify-self: center;
  }
}

/* ===== Mobile Typography Fix (Hero) ===== */
@media (max-width: 600px) {
  .home {
    padding: 22px 16px;
    gap: 22px;
  }

  .home-content h1 {
    font-size: clamp(1.65rem, 7.5vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
  }

  .change-text {
    font-size: clamp(1.05rem, 6vw, 1.7rem);
    line-height: 1.15;
  }

  .home-content p {
    font-size: clamp(0.95rem, 4vw, 1.1rem);
    line-height: 1.55;
  }
}

@media (max-width: 420px) {
  .home-content h1 { font-size: clamp(1.55rem, 8.2vw, 2.1rem); }
  .change-text { font-size: clamp(1.0rem, 7vw, 1.55rem); }
}