/****************************************************************************
 * Pastaladen (/pastaladen/, Seite ID 3696) - awork AAMT-157
 * Liegt in typo-canvas/assets/css/ - die Datei wird darum vom Theme
 * automatisch site-weit mitgeladen (typo_register_assets() in
 * core/assets.php laedt jede .css in diesem Ordner ungefiltert, so wie
 * custom.css, footer.css etc. daneben). Deshalb ist JEDE Regel hier an eine
 * #pastaladen-<abschnitt>-ID verankert, damit trotzdem nur diese eine Seite
 * betroffen ist - keine andere Seite hat diese IDs im Markup.
 ****************************************************************************/

/* Breiterer Contentbereich: die Sektionen tragen im Markup
   "small-12 medium-10 large-9 small-centered columns" - ab "medium" wird die
   Spalte dadurch auf 83%/75% der Row eingeschraenkt. Hier auf volle Row-Breite
   (wie "small-12") gesetzt, ohne die Klassen im Content selbst zu aendern. Die
   Row selbst bleibt bei ihrem normalen max-width (75rem) aus dem Grid. */
#pastaladen-hero .columns,
#pastaladen-kategorien .columns,
#pastaladen-entdecken .columns,
#pastaladen-philosophie .columns,
#pastaladen-handgemachte-pasta .columns,
#pastaladen-feinkost-aus-italien .columns,
#pastaladen-geschenke-und-schoenes .columns,
#pastaladen-kontakt .columns {
  width: 100%;
}

/* Schriften, die im Seiteninhalt bereits per font-family referenziert werden,
   aber bisher nirgends als @font-face registriert waren (Handgemachte Pasta,
   Feinkost aus Italien, Philosophie-Zitat liefen deshalb im Standard-Font). */
@font-face {
  font-family: 'Naive Inline Sans Shadow Bold';
  src: url('/wp-content/uploads/fonts/NaiveInlineSansShadowBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dreaming Outloud Script';
  src: url('/wp-content/uploads/fonts/DO-Script-SlantedPRO.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/****************************************************************************
 * Hero
 ****************************************************************************/
#pastaladen-hero img { width: 100%;}

/****************************************************************************
 * Kategorien / Intro-Illustration
 ****************************************************************************/
#pastaladen-kategorien .pastaladen-kategorien-illustration img {
  /*width: 130px;*/
	width: 50%;
	max-width: 350px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}
#pastaladen-kategorien .pastaladen-kategorien-illustration p {
  max-width: 480px;
  margin: 0 auto;
  font-size: 19px;
  line-height: 1.45;
}

/****************************************************************************
 * Ein Ort zum Entdecken (Bild + Text nebeneinander)
 ****************************************************************************/
/* Der Trenner (Herz-Icon) traegt bereits ein inline grid-column:1/-1 - der
   Content ist also fuer ein 2-spaltiges Grid gebaut, nicht fuer Flex. */
#pastaladen-entdecken .pastaladen-entdecken {
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 16px;
  text-align: left;
}
#pastaladen-entdecken .pastaladen-entdecken-text {
  min-width: 0;
	height: 100%;
	background-color: #efefef;
	padding: 3rem;
}
#pastaladen-entdecken .pastaladen-entdecken-bild img {
  width: 100%;
  height: auto;
  display: block;
}
#pastaladen-entdecken .pastaladen-entdecken-text h2 {
  font-family: 'Naive Inline Sans Shadow Bold', sans-serif;
  font-weight: normal;
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 0.6rem;
}
#pastaladen-entdecken .pastaladen-entdecken-text p {
  font-size: 15px;
  line-height: 1.4;
}
@media screen and (min-width: 40em) {
  #pastaladen-entdecken .pastaladen-entdecken {
    grid-template-columns: 42% 1fr;
  }
  #pastaladen-entdecken .pastaladen-entdecken-text h2 {
    font-size: 28px;
  }
  #pastaladen-entdecken .pastaladen-entdecken-text p {
    font-size: 16px;
  }
}
#pastaladen-entdecken .pastaladen-entdecken-text a {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  text-decoration: none;
}

/****************************************************************************
 * Philosophie-Zitat (Video + Zitat)
 * Ueberschreibt bewusst per ID-Selektor (statt die Regeln in "Zusaetzliches
 * CSS" zu bearbeiten) die dort vorhandenen .page-id-3696-Regeln, die wegen
 * zwei fehlenden schliessenden Klammern nur innerhalb @media(max-width:767px)
 * landen und daher auf breiteren Bildschirmen gar nicht greifen.
 ****************************************************************************/
#pastaladen-philosophie .pastaladen-philosophie {
  width: 100%;
  margin: 0 auto;
  background: #efefef;
}
#pastaladen-philosophie .pastaladen-philosophie-text {
  text-align: center;
  padding: 60px 40px;
}
#pastaladen-philosophie .pastaladen-philosophie-text p {
  margin: 0;
  font-family: 'Dreaming Outloud Script', sans-serif;
  font-size: 32px;
  line-height: 1.25;
  color: #111111;
}
#pastaladen-philosophie .pastaladen-philosophie-signatur img {
  width: 150px;
  height: auto;
  display: block;
  margin: 20px auto 0;
}
@media screen and (min-width: 64em) {
  #pastaladen-philosophie .pastaladen-philosophie-text {
    padding: 90px 40px;
  }
  #pastaladen-philosophie .pastaladen-philosophie-text p {
    font-size: 44px;
  }
}

/****************************************************************************
 * Geschenke & Schönes (gleiches Muster wie Handgemachte Pasta / Feinkost,
 * die schon per Inline-Style gestylt sind - hier fehlte es komplett)
 ****************************************************************************/
#pastaladen-geschenke-und-schoenes .pastaladen-geschenke-bild img {
  width: 100%;
  height: auto;
  display: block;
}
#pastaladen-geschenke-und-schoenes .pastaladen-geschenke-text {
  text-align: left;
  margin-top: 20px;
}
#pastaladen-geschenke-und-schoenes .pastaladen-geschenke-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
#pastaladen-geschenke-und-schoenes .pastaladen-geschenke-title h2 {
  font-family: 'Naive Inline Sans Shadow Bold', sans-serif;
  font-weight: normal;
  font-size: 34px;
  line-height: 1.05;
  margin: 0;
}
#pastaladen-geschenke-und-schoenes .pastaladen-geschenke-title img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 28px;
}
#pastaladen-geschenke-und-schoenes .pastaladen-geschenke-text > p {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.4;
}
#pastaladen-geschenke-und-schoenes .pastaladen-geschenke-cta a {
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  text-decoration: none;
}

/****************************************************************************
 * Kontakt-Box (dunkelgruener Block wie im Design-Entwurf)
 * Gruenton ist eine Annaeherung an den Entwurf, kein festgelegter
 * Marken-Hex-Wert - bitte gegenchecken und bei Bedarf anpassen.
 ****************************************************************************/
#pastaladen-kontakt .pastaladen-kontakt {
  display: flex;
  flex-wrap: wrap;
}
#pastaladen-kontakt .pastaladen-kontakt-text,
#pastaladen-kontakt .pastaladen-kontakt-bild {
  flex: 1 1 280px;
  min-width: 260px;
}
#pastaladen-kontakt .pastaladen-kontakt-text {
  /*background: #1f3b2f;*/
	background: #efefef;
  /*color: #ffffff;*/
  padding: 50px 40px;
  text-align: left;
}
#pastaladen-kontakt .pastaladen-kontakt-text h2 {
  /*color: #ffffff;*/
}
#pastaladen-kontakt .pastaladen-kontakt-text a {
  /*color: #ffffff;*/
}
#pastaladen-kontakt .pastaladen-kontakt-herz {
  width: 40px;
  height: auto;
  margin-bottom: 12px;
}
#pastaladen-kontakt .pastaladen-kontakt-bild {
  min-height: 240px;
}
#pastaladen-kontakt .pastaladen-kontakt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}