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

body {
  font-family: 'Segoe UI', nobel, din-bold, din-medium, sans-serif;
  line-height: 1.6;
  background-color: #EFF3F5;
  padding: 40px 5%; /* Mehr Platz am Rand */
  color: #333;
  position: relative;
  min-height: 200vh;
}

/* Header linksbündig */
.page-header {
  max-width: 90%;      /* Gleiche Breite wie der Katalog */
  margin: 0 0 30px 5%; /* 5% Abstand von links, wie beim Katalog */
  text-align: left;
}

h1 {
  font-size: 4rem;
  font-family: 'din-bold', sans-serif;
  color: #63889C;
  line-height: 0.9;
}

.subtitle {
  font-size: 1.5rem;
  color: #63889C;
  margin-top: -5px;
  margin-bottom: 20px;
  display: block;
}

.katalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Exakt 2 Spalten */
    gap: 30px; 
    width: 90%; 
    margin-left: 5%; /* Startet exakt an der gleichen linken Kante wie der Header */
    margin-right: 5%;
    padding: 0;
}

.katalog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwingt das Grid auf genau 2 Spalten */
    gap: 30px; /* Abstand zwischen den Bildern */
    width: 90%; 
    margin: 0 auto;
    padding: 0;
}

.card {
    width: 100%;
}

.card img {
    width: 100%;
    height: auto; /* Sorgt dafür, dass das Bild sein Seitenverhältnis behält */
    display: block;
}

.card-header {
  order: 1;
  padding: 0 0 15px 0;
  line-height: 1;
}

.card-header h3 {
  font-family: 'din-medium', sans-serif;
  color: #63889C;
  font-size: 1.8rem;
}

.card img {
  order: 2;
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

.card-content {
  order: 3;
  padding: 15px 0 0 0;
  font-size: 1rem;
  color: #63889C;
}

@font-face {
    font-family: 'scheinundsein';
    src: url('/assets/fonts/scheinundsein.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

.floating-letter {
    position: absolute;
    font-family: 'scheinundsein', sans-serif;
    pointer-events: none;
    user-select: none;
    z-index: 1000;
    opacity: 0.5;
    line-height: 1;
    font-weight: bold;
}

/* Positionen */
.pos-1  { top: 4%;    left: 5%; }
.pos-2  { top: 8%;    right: 10%; }
.pos-3  { top: 16%;   left: 20%; }
.pos-4  { top: 20%;   right: 5%; }
.pos-5  { top: 24%;   left: 10%; }
.pos-6  { top: 28%;   right: 20%; }
.pos-7  { top: 32%;   left: 5%; }
.pos-8  { top: 36%;   right: 10%; }
.pos-9  { top: 40%;   left: 15%; }
.pos-10 { top: 44%;   right: 5%; }
.pos-11 { top: 48%;   left: 10%; }
.pos-12 { top: 52%;   right: 15%; }
.pos-13 { top: 56%;   left: 5%; }
.pos-14 { top: 60%;   left: 10%; }
.pos-15 { top: 64%;   right: 5%; }
.pos-16 { top: 68%;   left: 20%; }
.pos-17 { top: 72%;   right: 15%; }
.pos-18 { top: 76%;   left: 5%; }
.pos-19 { top: 80%;   right: 10%; }
.pos-20 { top: 84%;   left: 25%; }
.pos-21 { top: 88%;   right: 5%; }
.pos-22 { top: 92%;   left: 10%; }
.pos-23 { top: 96%;   right: 20%; }
.pos-24 { top: 100%;  left: 15%; }
.pos-25 { top: 104%;  right: 10%; }
.pos-26 { top: 108%;  left: 5%; }
.pos-27 { top: 112%;  right: 15%; }

.silber { color: rgba(220, 225, 235, 1.0) !important; }
.gold   { color: rgba(212, 175, 55, 0.6) !important; }

.size-s { font-size: 10rem; }
.size-m { font-size: 20rem; }
.size-l { font-size: 30rem; }