/* ==========================================================
   Knickgeschichte – Modern Tech UI
   Schrift: Courier Prime (Monospace)
   Akzentfarben:
   Blau: #4F3FFF
   Gelb: #FCFF94
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Courier Prime', monospace;
  background:
    radial-gradient(circle at top left, rgba(79, 63, 255, .18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(252, 255, 148, .12), transparent 25%),
    linear-gradient(180deg, #090a0f 0%, #11131b 50%, #090a0f 100%);
  color: #111;
}

main {
  max-width: 1040px;
  margin: 2rem auto;
  padding: 0 1.25rem 2rem;
}

/* ================= HERO ================= */

.hero {
  width: min(100%, 560px);
  margin: 0 auto 0;

  padding: 2.5rem;

  background: #fffbf0;
  transform: skewX(-5deg);

  border: 2px solid #4F3FFF;
  border-radius: 2px;
  
  box-shadow: 
    0 12px 24px rgba(0,0,0,0.2),
    6px 12px 8px rgba(0,0,0,0.15);

  position: relative;
}

/* Folded paper effect after hero */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.05));
  clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
  z-index: 1;
}

.hero-copy h1 {
  margin: 0 0 1rem;

  font-size: clamp(2.5rem,4vw,4.5rem);
  line-height: 1;
  letter-spacing: -.03em;

  font-weight: 700;
  color: #111;
  transform: skewX(5deg);
  font-family: 'Courier Prime', monospace;
}

.hero-copy p {
  margin: 0;

  color: #111;

  font-size: 1.05rem;
  line-height: 1.8;
  transform: skewX(5deg);
  font-family: 'Courier Prime', monospace;
}

/* ================= LANGUAGE ================= */

.language-switcher {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;

  margin-bottom: 1.8rem;
}

.language-switcher label {
  color: #4F3FFF;
  font-weight: 600;
  font-family: 'Courier Prime', monospace;
}

.language-switcher select {

  font-family: 'Courier Prime', monospace;

  padding: .9rem 1rem;

  min-width: 190px;

  color: #111;

  background: #fffbf0;

  border: 2px solid #4F3FFF;
  border-radius: 2px;

  outline: none;

  backdrop-filter: none;
}

/* ================= GRID ================= */

.grid {
  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 0 !important;

  margin-top: -12px;
}

.card,
.receipt-card {
  width: min(100%,560px);
}

/* ================= CARD ================= */

.card {

  padding: 1.8rem;

  background: #fffbf0;

  border: 2px solid #4F3FFF;
  border-radius: 2px;

  backdrop-filter: none;

  transform: skewX(-5deg);

  position: relative;

  box-shadow: 
    0 12px 24px rgba(0,0,0,0.2),
    6px 12px 8px rgba(0,0,0,0.15);
}

/* Darker shadow effect on 2nd and 4th cards */
.card:nth-child(2),
.card:nth-child(4) {
  background: #f5f0e8;
}

/* Folded paper effect between cards */
.card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.05));
  clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
  z-index: 1;
}

.card:last-of-type::after {
  display: none;
}

.card h2 {
  margin-top: 0;
  margin-bottom: .8rem;

  font-size: 1.5rem;

  font-weight: 700;

  color: #111;

  transform: skewX(5deg);
  font-family: 'Courier Prime', monospace;
}

.card-description {

  margin-bottom: 1.3rem;

  color: #111;

  line-height: 1.7;

  transform: skewX(5deg);
  font-family: 'Courier Prime', monospace;
}

/* ================= SPECIAL: Der Knick der Geschichte ================= */

.card.knick-card {
  background: #fffbf0;
}

.card.knick-card h2,
.card.knick-card .card-description,
.card.knick-card p {
  color: #111;
}

.card.knick-card ul {
  color: #111;
}

.card.knick-card li::marker {
  color: #4F3FFF;
}

/* Blue pre field inside knick-card */
.card.knick-card pre {
  background: #4F3FFF;
  color: #ffffff;
  border: 2px solid #4F3FFF;
}

/* ================= OVERVIEW ================= */

.overview-card ul {

  margin: 0 0 1rem;

  padding-left: 1.3rem;

  color: #111;

  line-height: 1.9;

  transform: skewX(5deg);
  font-family: 'Courier Prime', monospace;
}

.overview-card li {

  margin-bottom: .8rem;

  font-weight: 500;
  font-family: 'Courier Prime', monospace;
  color: #111;
}

.overview-card li::marker {

  color: #4F3FFF;
}

/* ================= BUTTON ================= */

button.primary {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 190px;

  padding: 1rem 2.2rem;

  border: 2px solid #4F3FFF;
  border-radius: 2px;

  cursor: pointer;

  font-family: 'Courier Prime', monospace;

  font-size: .95rem;

  font-weight: 700;

  letter-spacing: .05em;

  text-transform: uppercase;

  color: #111;

  background: #FCFF94;

  transform: skew(-18deg);

  box-shadow: 
    0 8px 16px rgba(0,0,0,0.2),
    4px 8px 6px rgba(0,0,0,0.15);

  transition:
      .2s ease;

  position: relative;

  opacity: 1;
}

/* Text gerade */
button.primary span {

  display: inline-block;

  transform: skew(18deg);
  font-family: 'Courier Prime', monospace;
  color: #111;
}

button.primary:hover {

  transform: skew(-18deg) translateY(-3px);

  filter: brightness(0.95);

  box-shadow: 
    0 12px 24px rgba(79,63,255,.3),
    4px 8px 6px rgba(0,0,0,0.15);
}

button.primary:active {

  transform: skew(-18deg) translateY(1px);
}

button.primary:disabled {

  opacity: 1;

  cursor: not-allowed;

  transform: skew(-18deg);

  box-shadow: none;
}

/* ================= STATUS ================= */

.status {

  margin-top: 1rem;

  color: #111;
  font-family: 'Courier Prime', monospace;
}

.history-link {

  margin-top: 1rem;
}

.history-link a {

  color: #4F3FFF;

  font-weight: 600;

  text-decoration: none;
  font-family: 'Courier Prime', monospace;
}

.history-link a:hover {

  text-decoration: underline;
}

/* ================= LOADING ================= */

.print-loading {

  display: flex;

  align-items: center;

  gap: .7rem;

  color: #4F3FFF;

  font-weight: 600;
  font-family: 'Courier Prime', monospace;
}

.spinner {

  width: 1rem;

  height: 1rem;

  border-radius: 50%;

  border: 2px solid rgba(79,63,255,.25);

  border-top-color: #4F3FFF;

  animation: spin .8s linear infinite;
}

@keyframes spin {

  to {

    transform: rotate(360deg);
  }
}

/* ================= RECEIPT ================= */

.receipt-card {

  margin-top: 0;
}

pre {

  white-space: pre-wrap;

  word-wrap: break-word;

  overflow-x: auto;

  padding: 1.4rem;

  background: #05060b;

  color: #4F3FFF;

  border-radius: 2px;

  border: 2px solid #4F3FFF;

  font-family: 'Courier Prime', monospace;

  font-size: .96rem;

  line-height: 1.8;

  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* ================= PRINT ================= */

@media print {

  @page {

    size: 80mm 200mm;

    margin: 0;
  }

  body,
  main,
  .receipt-card,
  pre {

    width: 8cm !important;

    max-width: 8cm !important;

    font-size: .8rem !important;

    line-height: 1.35 !important;
  }

  body {

    margin: 0;

    padding: 0;

    background: white;

    color: black;
  }

  .receipt-card {

    background: transparent;

    border: none;

    box-shadow: none;

    padding: 0;

    margin: 0;
  }

  pre {

    background: transparent;

    color: black;

    border: none;

    padding: .4rem;

    border-radius: 0;

    overflow: visible;
  }
}

/* ================= RESPONSIVE ================= */

@media (min-width:720px){

    .grid{

        display:flex!important;

        flex-direction:column!important;

        align-items:center!important;

        justify-content:center!important;
    }
}

@media (max-width:620px){

    main{

        margin-top:1.5rem;
    }

    .hero{

        padding:1.8rem;
    }

    .card{

        padding:1.35rem;
    }

    button.primary{

        width:100%;
    }
}