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

html,
body {
  width: 100%;
  min-height: 100%;
  background: #dddddd;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page {
  width: 100%;
  min-height: 100vh;
  background: #dddddd;
	background-image: url("gfx/back1.png");
	background-repeat: repeat;
	background-position: top left;
	background-size: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.hero-box {
  --logo-width: 300px;
  --logo-height: 360px;
  --text-raw-width: 222px;
  --text-raw-height: 115.736px;
  --text-target-height: 104px;
  --text-scale-x: 1.351351;
  --text-scale-y: 0.97436;

  width: 1002px;
  height: var(--logo-height);
  display: grid;
  grid-template-columns: var(--logo-width) 30px 2px 30px var(--logo-width);
  align-items: stretch;
  justify-content: center;
}

.logo-area {
  width: var(--logo-width);
  height: var(--logo-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-area img {
  width: var(--logo-width);
  height: var(--logo-height);
  display: block;
  object-fit: contain;
}

.divider {
  width: 2px;
  height: var(--logo-height);
  background: #000000;
}

.text-area {
  width: var(--logo-width);
  height: var(--logo-height);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: visible;
  transform: translateY(6px);
}

.text-block {
  width: var(--text-raw-width);
  height: var(--text-raw-height);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 28.3px;
  line-height: 100.1;
  font-weight: 700;
  color: #000000;
  white-space: nowrap;
  transform: scale(var(--text-scale-x), var(--text-scale-y));
  transform-origin: left bottom;

}

.text-block div {
  line-height: 1.1;
}

.btn {
  text-decoration: none;
  color: #000;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  transition: transform 0.08s ease-out, text-shadow 0.08s ease-out;
}

/* Hover: schnell, knackig, dunkler Schatten */
.btn:hover {
  transform: translateY(-2px);
  text-shadow: 0 8px 5px rgba(0, 0, 0, 0.40);
}

/* Desktop bis 1920 px */
@media (min-width: 1201px) {
  .hero-box {
    --logo-width: 300px;
    --logo-height: 360px;
    --text-target-height: 104px;
    --text-scale-x: 1.351351;
    --text-scale-y: 0.97436;
    width: 1002px;
  }
}

/* Breakpoint 1200 px: Tablets Landscape / kleine Desktops */
@media (max-width: 1200px) {
  .page {
    padding: 32px;
  }

  .hero-box {
    --logo-width: 270px;
    --logo-height: 323px;
    --text-target-height: 93.6px;
    --text-scale-x: 1.216216;
    --text-scale-y: 0.876924;
    width: min(100%, 900px);
    grid-template-columns: var(--logo-width) 27px 2px 27px var(--logo-width);
  }
}

/* Tablets Portrait */
@media (max-width: 900px) and (orientation: portrait) {
  .page {
    padding: 28px;
  }

  .hero-box {
    --logo-width: 228px;
    --logo-height: 273px;
    --text-target-height: 79.04px;
    --text-scale-x: 1.027027;
    --text-scale-y: 0.740514;
    width: min(100%, 760px);
    grid-template-columns: var(--logo-width) 23px 2px 23px var(--logo-width);
  }
}

/* Smartphones Landscape */
@media (max-width: 767px) and (orientation: landscape) {
  .page {
    padding: 20px;
  }

  .hero-box {
    --logo-width: 186px;
    --logo-height: 223px;
    --text-target-height: 64.48px;
    --text-scale-x: 0.837838;
    --text-scale-y: 0.604103;
    width: min(100%, 620px);
    grid-template-columns: var(--logo-width) 19px 2px 19px var(--logo-width);
  }
}

/* Smartphones Portrait */
@media (max-width: 600px) and (orientation: portrait) {
  .page {
    padding: 24px;
  }

  .hero-box {
    --logo-width: 220px;
    --logo-height: 264px;
    --text-target-height: 76.2667px;
    --text-scale-x: 0.990991;
    --text-scale-y: 0.714531;
    width: 100%;
    max-width: 360px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .divider {
    width: var(--logo-width);
    height: 2px;
  }

  .text-area {
  --text-scale-x: .989000;
    height: var(--text-target-height);
    justify-content: flex-start;
  }
}