/* ==========================================================================
   iappear.at – layout.css
   Grid, Flex, Sektionen, Responsive Breakpoints
   --------------------------------------------------------------------------
   Mobile-first: Grundzustand ist immer 1-spaltig fuer kleine Screens,
   ab definierten Breakpoints werden Spalten nachgereicht.
     - 540px  : kleines Tablet hochkant
     - 720px  : Tablet
     - 960px  : kleines Desktop / Tablet quer
     - 1080px : Desktop
   ========================================================================== */

.section {
  /* Nur vertikales Padding setzen — horizontales kommt von .container,
     damit Sektionen mit beiden Klassen (z.B. "section hero container")
     den Seitenrand nicht verlieren. */
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  position: relative;
}
@media (min-width: 720px) {
  .section { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
}
/* Sektions-Trenner als zarter Lichtstreifen: Mitte voll, Raender weich
   ausgefadet. Wirkt eleganter als eine durchgehende Linie quer ueber den
   Bildschirm. Wird per ::before geloest, damit der first-of-type leicht
   ohne Linie bleibt. */
.section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 85%);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.grid { display: grid; gap: var(--sp-3); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 540px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .grid { gap: var(--sp-4); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Hero
   Mobile: alles untereinander gestapelt — Claim, Logo+Phones, Kategorie-Links.
   Ab 960px: 3-Spalten-Layout (links Claim, mitte Brand+Phones, rechts Kategorien). */
.hero {
  position: relative;            /* fuer absolut positionierte hero__social */
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  /* Nur top/bottom — horizontales Padding kommt von .container.
     Top-Padding > Nav-Hoehe (~74px) damit der Lorbeerkranz nicht
     von der fixen Navigation ueberdeckt wird. */
  padding-top: calc(var(--sp-2) + 80px);
  padding-bottom: var(--sp-1);
  align-items: center;
}
@media (min-width: 720px) {
  .hero { gap: var(--sp-1); padding-top: calc(var(--sp-2) + 50px); padding-bottom: var(--sp-1); }
}
@media (min-width: 960px) {
  .hero {
    min-height: 100vh;
    grid-template-columns: .8fr 1.6fr .8fr;
    gap: var(--sp-1);
    padding-top: calc(var(--sp-1) + 56px);
    padding-bottom: var(--sp-1);
  }
}
.hero__left  {
  display: flex; flex-direction: column; gap: var(--sp-2);
  text-align: center; align-items: center;
}
@media (min-width: 960px) {
  /* Hero-left als Grid mit 3 Rows:
       1. flexibler Spacer (1fr — laesst Claim+Stage nach unten gleiten)
       2. claim (direkt ueber dem Kranz, italic-serif gross)
       3. stage/laurel (Kranz mit Awards-Rotator)
     Cluster Claim+Stage zusammen, optisch in der Hero-Mitte verankert. */
  .hero__left {
    text-align: left;
    align-self: stretch;
    display: grid;
    grid-template-rows: 1fr auto auto 1fr;
    gap: 0;
    height: 100%;
    justify-items: start;
  }
  .hero__left .hero__claim { grid-row: 2; margin: 0 0 var(--sp-3) 0; align-self: end; }
  .hero__left .hero__stage { grid-row: 3; margin-top: 0; align-self: start; }
}
.hero__mid   { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1); }
.hero__right {
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: 420px; margin: 0 auto;
  width: 100%;
}
@media (min-width: 960px) {
  .hero__right {
    gap: .4rem;                 /* Kategorien eng gestapelt */
    max-width: none;
    margin: 0;
    justify-content: center;    /* vertikal mittig zum Phone-Mockup */
    align-items: flex-start;    /* horizontal links buendig */
    height: 100%;
  }
}

.phones {
  display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3);
  flex-wrap: nowrap;
  flex-wrap: wrap;
}

/* Ueber uns / Netzwerk */
.network {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .network { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Features-Sektion: Liste | Phone | Text
   Mobile: alles untereinander, Phone in der Mitte mittig.
   720px: Liste links, Phone+Text rechts.
   960px: 3 Spalten. */
.features {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
.features .phones { margin-top: 0; }
@media (min-width: 720px) {
  .features {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .features [data-feature-desc] { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .features {
    grid-template-columns: 1fr 1fr 1.2fr;
  }
  .features [data-feature-desc] { grid-column: auto; }
}

/* Vitrine */
.vitrine-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width: 539px) {
  /* minmax(0, 1fr) statt 1fr: erlaubt dem Grid, die Spalten wirklich gleich
     breit zu machen, auch wenn ein Item ein langes nicht-brechendes Wort hat
     (z.B. "askd:Magazin"). Sonst wird die linke Spalte breiter als die rechte. */
  .vitrine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
}