:root {
  --bg:    #f0ede8;
  --ink:   #1a1a1a;
  --cb:    #1a2472;
  --cc:    #7a9e7e;
  --blue:  #1a2472;
  --red:   #b43c1e;
  --green: #1e6450;
  --tan:   #8c6414;
  --gelb:  #f2b705;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }

.corner { position: fixed; width: 28px; height: 28px; z-index: 50; pointer-events: none; }
.corner-tl { top:16px; left:16px;   border-top:2px solid rgba(26,26,26,0.32); border-left:2px solid rgba(26,26,26,0.32); }
.corner-tr { top:16px; right:16px;  border-top:2px solid rgba(26,26,26,0.32); border-right:2px solid rgba(26,26,26,0.32); }
.corner-bl { bottom:16px; left:16px;   border-bottom:2px solid rgba(26,26,26,0.32); border-left:2px solid rgba(26,26,26,0.32); }
.corner-br { bottom:16px; right:16px;  border-bottom:2px solid rgba(26,26,26,0.32); border-right:2px solid rgba(26,26,26,0.32); }

.block {
  position: relative;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.5s ease, border-color 0.5s ease;
}
.block .el-label {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.16em;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* Der naechste Block, der dran ist, atmet leicht */
.block.dran { animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,36,114,0); }
  50%      { box-shadow: 0 0 0 4px rgba(26,36,114,0.16); }
}

.fill {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.block.filled { animation: none; }
.block.filled .el-label { opacity: 0; }
.block.filled .fill {
  opacity: 1; pointer-events: auto;
  animation: stempel 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes stempel {
  0%   { opacity: 0; transform: scale(1.7); }
  55%  { opacity: 1; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

.layout.beben { animation: beben 0.28s ease; }
@keyframes beben {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(2px,-2px); }
  50%  { transform: translate(-2px,1px); }
  75%  { transform: translate(1px,2px); }
  100% { transform: translate(0,0); }
}

@keyframes from-top    { from { transform: translateY(-120vh); } to { transform: translateY(0); } }
@keyframes from-bottom { from { transform: translateY( 120vh); } to { transform: translateY(0); } }
@keyframes from-left   { from { transform: translateX(-120vw); } to { transform: translateX(0); } }
@keyframes from-right  { from { transform: translateX( 120vw); } to { transform: translateX(0); } }

.slide-top    { animation: from-top    1.1s cubic-bezier(0.16,1,0.3,1) var(--dl,0s) both; }
.slide-bottom { animation: from-bottom 1.1s cubic-bezier(0.16,1,0.3,1) var(--dl,0s) both; }
.slide-left   { animation: from-left   1.1s cubic-bezier(0.16,1,0.3,1) var(--dl,0s) both; }
.slide-right  { animation: from-right  1.1s cubic-bezier(0.16,1,0.3,1) var(--dl,0s) both; }

.layout {
  position: fixed;
  top: 44px; left: 44px; right: 44px; bottom: 44px;
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  grid-template-rows: 52px 1fr 1fr 52px;
  gap: 8px;
  z-index: 5;
}

.nav {
  grid-column: 1 / 4;
  grid-row: 1;
  background: rgba(26,36,114,0.1);
  border: 2px solid rgba(26,36,114,0.3);
  --dl: 0s;
}
.nav .el-label { font-size: 15px; color: var(--blue); }
.nav.filled { background: rgba(26,36,114,0.16); }
.nav-fill { gap: 26px; font-family: 'Space Mono', monospace; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; }
.nav-fill .brand { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 0.14em; color: var(--blue); margin-right: 8px; }
.nav-fill a { color: var(--ink); text-decoration: none; opacity: 0.75; transition: opacity 0.2s, color 0.2s; cursor: pointer; }
.nav-fill a:hover { opacity: 1; color: var(--blue); }

.strip-tl {
  grid-column: 1; grid-row: 2;
  background: rgba(30,100,80,0.1);
  border: 2px solid rgba(30,100,80,0.28);
  --dl: 0.2s;
}
.strip-bl {
  grid-column: 1; grid-row: 3;
  background: rgba(30,100,80,0.06);
  border: 2px solid rgba(30,100,80,0.2);
  --dl: 0.4s;
}
.strip-tr {
  grid-column: 3; grid-row: 2;
  background: rgba(180,60,30,0.09);
  border: 2px solid rgba(180,60,30,0.25);
  --dl: 0.3s;
}
.strip-br {
  grid-column: 3; grid-row: 3;
  background: rgba(180,60,30,0.05);
  border: 2px solid rgba(180,60,30,0.18);
  --dl: 0.5s;
}

.strip-tl .el-label,
.strip-bl .el-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; color: var(--green); }
.strip-tr .el-label,
.strip-br .el-label { writing-mode: vertical-rl; font-size: 14px; color: var(--red); }

.mini {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 10px;
}
.mini-titel {
  font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; opacity: 1;
}

/* Echtes Aa: Oswald ist die Bebas-Schwester mit Kleinbuchstaben */
.typo-aa { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 44px; line-height: 1; color: var(--green); }

.chips { display: flex; flex-direction: column; gap: 7px; }
.chip {
  width: 38px; height: 16px; border-radius: 4px;
  transform: scale(0); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.filled .chip { transform: scale(1); }
.filled .chip:nth-child(1) { transition-delay: 0.20s; }
.filled .chip:nth-child(2) { transition-delay: 0.30s; }
.filled .chip:nth-child(3) { transition-delay: 0.40s; }
.filled .chip:nth-child(4) { transition-delay: 0.50s; }

.score { position: relative; width: 64px; height: 64px; }
.score svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.score .ring-bg { fill: none; stroke: rgba(180,60,30,0.15); stroke-width: 5; }
.score .ring-fg {
  fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 163.4; stroke-dashoffset: 163.4;
  transition: stroke-dashoffset 1.1s ease 0.25s;
}
.filled .ring-fg { stroke-dashoffset: 0; }
.score .zahl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--red);
}

/* Responsive-Block: PC- und Handy-Umriss */
.devices { display: flex; align-items: flex-end; gap: 7px; }
.dev {
  border: 2.5px solid var(--red); border-radius: 4px; opacity: 0.85;
  transform: scale(0); transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.dev-pc    { width: 46px; height: 34px; }
.dev-phone { width: 17px; height: 28px; }
.filled .dev:nth-child(1) { transform: scale(1); transition-delay: 0.20s; }
.filled .dev:nth-child(2) { transform: scale(1); transition-delay: 0.38s; }

.hero-block {
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}

.footer {
  grid-column: 1 / 4;
  grid-row: 4;
  background: rgba(140,100,20,0.1);
  border: 2px solid rgba(140,100,20,0.3);
  --dl: 0.15s;
  gap: 20px;
}
.footer .el-label { font-size: 15px; color: var(--tan); }
.footer-fill {
  width: 100%; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(140,100,20,0.85);
}
.imp-link {
  font-family: 'Space Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(140,100,20,0.7); text-decoration: none;
  border-bottom: 1px solid rgba(140,100,20,0.4);
  cursor: pointer; transition: color 0.2s;
}
.imp-link:hover { color: var(--tan); }
/* Fix: Platzhalter-Impressum verschwindet, sobald der Footer gefuellt ist */
#impLinkPh { transition: opacity 0.3s ease; }
.footer.filled #impLinkPh { opacity: 0; pointer-events: none; }
.replay {
  background: none; border: none; cursor: pointer;
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(140,100,20,0.7); transition: color 0.2s;
}
.replay:hover { color: var(--tan); }

.imp-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,26,26,0.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.imp-overlay.open { opacity: 1; pointer-events: all; }
.imp-box {
  background: var(--bg); border-radius: 10px;
  border: 1px solid rgba(26,26,26,0.15);
  padding: 40px 48px; max-width: 480px; width: 90%;
  font-family: 'Space Mono', monospace; font-size: 14px;
  line-height: 1.9; color: var(--ink); position: relative;
}
.imp-box h2 {
  font-family: 'Bebas Neue', sans-serif; font-size: 30px;
  margin-bottom: 20px; color: var(--cb); letter-spacing: 0.04em;
}
.imp-close {
  position: absolute; top: 16px; right: 20px;
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.15em; cursor: pointer; opacity: 0.4;
  transition: opacity 0.2s;
}
.imp-close:hover { opacity: 1; }

.hero-content {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; transition: opacity 0.7s ease;
}
.hero-content.in { opacity: 1; }

.domain-label {
  font-family: 'Space Mono', monospace;
  font-size: 14px; letter-spacing: 0.32em;
  color: var(--cb); text-transform: uppercase;
  margin-bottom: 16px; opacity: 0.85;
}

.headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(30px, 5.5vw, 80px);
  line-height: 0.92;
  display: inline-block; text-align: left;
}

.line-continuously { display: block; text-align: center; color: var(--ink); }
.line-typed        { display: block; text-align: left; letter-spacing: 0; }
.word-under        { color: var(--cb); }
.word-construction { color: var(--cc); }

.typed-cursor {
  display: inline-block; width: 3px; height: 0.72em;
  background: var(--cc); vertical-align: middle;
  margin-left: 4px; top: -0.04em; position: relative; opacity: 0;
}
.typed-cursor.blinking { animation: blink 1.05s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Caption im gleichen Stil wie das lookfirst.at-Label oben */
.caption {
  margin-top: 14px;
  font-family: 'Space Mono', monospace; font-size: 14px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cb); opacity: 0;
  transition: opacity 0.8s ease;
}
.caption.visible { opacity: 0.85; }

/* Bau-Hinweis: Textmarker-Stil, schlaegt gross ein, ist klickbar,
   und klappt nach dem Fertigbauen komplett zusammen (kein Loch im Layout) */
.bau-hinweis {
  margin-top: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  opacity: 0;
  max-height: 240px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bau-hinweis.an {
  opacity: 1;
  animation:
    einschlag 1.1s cubic-bezier(0.22, 1.2, 0.36, 1) both,
    pulsieren 2s ease-in-out 1.5s infinite;
}
@keyframes einschlag {
  0%   { opacity: 0; transform: scale(3.8); }
  40%  { opacity: 1; transform: scale(0.85) rotate(-2.5deg); }
  55%  { transform: scale(1.1) rotate(2deg); }
  70%  { transform: scale(0.95) rotate(-1.2deg); }
  85%  { transform: scale(1.04) rotate(0.6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes pulsieren {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.bau-hinweis.weg {
  opacity: 0; max-height: 0; margin-top: 0; overflow: hidden;
  transition: opacity 0.5s ease, max-height 0.6s ease 0.25s, margin-top 0.6s ease 0.25s;
  animation: none;
  pointer-events: none;
}

/* Zeile 1: Barlow Condensed mit gelbem Markerstrich */
.bau-gross {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.1; letter-spacing: 0.02em;
  color: var(--cb);
  background: linear-gradient(transparent 16%, var(--gelb) 16%, var(--gelb) 90%, transparent 90%);
  padding: 0 12px;
  transform: rotate(-1deg);
  white-space: nowrap;
}
/* Zeile 2: kleiner darunter */
.bau-klein {
  font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cb);
  margin-top: 2px;
}
.pfeil {
  font-size: 16px; color: var(--cb); opacity: 0.95;
  animation: huepf 1.3s ease-in-out infinite;
}
@keyframes huepf {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.punkte {
  display: flex; gap: 5px; margin-top: 2px;
}
.pkt {
  width: 14px; height: 5px; border-radius: 2px;
  background: rgba(26,26,26,0.22);
  transition: background 0.3s ease;
}
.pkt.voll { background: var(--cb); }

.contact {
  margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.contact.visible { opacity: 1; transform: translateX(0); }

/* "Kontakt" erscheint erst, wenn die Seite fertig gebaut ist */
.contact-hint {
  font-family: 'Space Mono', monospace; font-size: 12px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity 0.6s ease;
}
.contact-hint.visible { opacity: 0.65; }
.mail-link {
  font-family: 'Space Mono', monospace; font-size: clamp(14px,1.8vw,18px);
  color: var(--ink); text-decoration: none; letter-spacing: 0.08em;
  padding: 9px 18px; border: 1.5px solid rgba(26,26,26,0.45);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mail-link:hover { background: var(--cb); color: var(--bg); border-color: var(--cb); }

@media (max-width: 640px) {
  .layout {
    top: 32px; left: 32px; right: 32px; bottom: 32px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 44px 1fr 54px 40px;
    gap: 16px;
  }
  .nav        { grid-column: 1 / 3; grid-row: 1; }
  .hero-block { grid-column: 1 / 3; grid-row: 2; padding: 8px 12px; }
  .footer     { grid-column: 1 / 3; grid-row: 4; }

  .strip-tl, .strip-br { display: none; }
  .strip-bl { grid-column: 1; grid-row: 3; }
  .strip-tr { grid-column: 2; grid-row: 3; }

  .strip-bl .el-label, .strip-tr .el-label {
    writing-mode: horizontal-tb; transform: none;
  }
  /* Wort bleibt mobil sichtbar, nur kleiner */
  .mini { flex-direction: row; gap: 10px; padding: 4px 8px; }
  .mini-titel { font-size: 11px; letter-spacing: 0.16em; }
  .chips { flex-direction: row; gap: 5px; }
  .chip { width: 16px; height: 16px; }
  .score { width: 40px; height: 40px; }
  .score .zahl { font-size: 14px; }
  .nav-fill { gap: 14px; font-size: 12px; }
  .nav-fill .brand { font-size: 17px; }
  .footer-fill { font-size: 10px; letter-spacing: 0.12em; padding: 0 12px; }

  .domain-label { margin-bottom: 12px; }
  .caption { margin-top: 12px; font-size: 12px; letter-spacing: 0.22em; }
  .bau-hinweis { margin-top: 6px; gap: 5px; }
  .bau-gross { font-size: 34px; padding: 0 8px; }
  .bau-klein { font-size: 12px; letter-spacing: 0.14em; }
  .contact { margin-top: 10px; gap: 4px; }
  .mail-link { padding: 6px 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide-top, .slide-bottom, .slide-left, .slide-right,
  .block.filled .fill, .layout.beben, .block.dran, .pfeil,
  .bau-hinweis.an { animation: none !important; }
  .fill, .el-label, .chip, .bar, .dev, .ring-fg, .contact, .contact-hint, .hero-content, .caption, .bau-hinweis { transition: none !important; }
  .block.filled .fill { opacity: 1; }
}