/* Startseite. Vier Abschnitte, eine Überschriftengröße je Ebene, ein Abstandsmaß.
   Alle Schriftgrößen kommen aus der Skala in style.css. */

.atelier .container { max-width: 75rem; }
.atelier .section { padding-block: var(--section-pad); }
.atelier .text-link {
  display: inline-block;
  color: var(--color-primary-dark);   /* 7.29:1 auf #FCF8EF */
  font-size: var(--fs-sm);
  font-weight: 600;
  text-underline-offset: .3em;
}

/* Einstieg */
.welcome { padding: var(--section-pad-sm) 0 0; background: linear-gradient(120deg, #FCF8EF 60%, #F3EBDC); }
.welcome__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
.welcome__intro { max-width: 34ch; font-size: var(--fs-md); line-height: 1.65; color: var(--color-text-muted); margin: 0; }
.welcome__visual { justify-self: center; max-width: 18rem; width: 100%; }
/* Kein Beschnitt: Das Motiv ist 3:4 und wird auf jeder Breite vollständig gezeigt.
   Vorher stand hier ein fester Ausschnitt, der am Desktop nur einen Ausschnitt zeigte. */
.welcome__photo { margin: 0; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(58, 44, 34, .10); }
.welcome__photo img { width: 100%; height: auto; display: block; }

/* Suche: direkt im Einstieg, ohne Verzögerung sichtbar */
.search-wrap { position: relative; margin-top: var(--space-6); scroll-margin-top: 5.5rem; }
.search-panel { padding: var(--space-5) var(--space-6); background: #FFFDF8; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.atelier .search-panel__form { display: grid; grid-template-columns: 1fr; align-items: end; gap: var(--space-4); }
.atelier .search-panel select { border: 0; border-bottom: 1px solid var(--color-border-strong); border-radius: 0; background-color: transparent; box-shadow: none; padding-left: 0; }

/* Themen */
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section-heading h2 { margin-bottom: 0; }
.themes h2 { margin-bottom: var(--space-6); }
.theme-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.theme-tile {
  display: block;
  min-width: 0;
  padding: var(--space-5);
  background: #F0E3D7;
  color: var(--color-text);      /* 10.67:1 auf #F0E3D7 */
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out);
}
.theme-tile:hover { transform: translateY(-4px); color: var(--color-text); }
.theme-tile--bloom { background: #E8E9D9; }
.theme-tile--sun { background: #F4E7C8; }
.theme-tile--wave { background: #E3E8E3; }
.theme-art { display: block; height: 5.5rem; width: 100%; margin: 0 0 var(--space-4); stroke: currentColor; stroke-width: 1.3; color: #6E4A38; }
.theme-tile--bloom .theme-art, .theme-tile--wave .theme-art { color: #4F5638; }
/* hyphens: none verhindert den Trennstrich mitten im Wort am Handy. */
.atelier .theme-tile h3 { font-size: var(--fs-xl); line-height: 1.2; margin: 0; hyphens: none; overflow-wrap: break-word; }

/* Profile */
.atelier .expert-card { border: 1px solid var(--color-border); box-shadow: none; border-radius: var(--radius-md); background: #FFFCF6; padding: var(--space-5); }

/* Abschluss */
.join { text-align: center; }
.join__inner { display: grid; justify-items: center; gap: var(--space-4); }
.join__inner p { max-width: 44ch; margin: 0; }

@media (min-width: 640px) {
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atelier .search-panel__form { grid-template-columns: 1fr 1fr; }
  .atelier .search-panel__form > .btn { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .welcome__grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-10); }
  .welcome__visual { justify-self: end; max-width: 24rem; }
  .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .atelier .search-panel__form { grid-template-columns: 1fr 1fr auto; }
  .atelier .search-panel__form > .btn { grid-column: auto; }
}

/* Ruhiger Aufbau: kurz, ohne Verzögerung. Die Suche ist sofort da. */
.welcome__copy > *, .welcome__visual { opacity: 0; animation: riseIn 300ms cubic-bezier(.22, 1, .36, 1) forwards; }
.welcome__copy > *:nth-child(2) { animation-delay: 60ms; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome__copy > *, .welcome__visual { opacity: 1; animation: none; transform: none; }
}