/*
Theme Name: Gärtnerei Guyot
Theme URI: https://gaertnerei-guyot.de
Author: Gärtnerei Guyot
Description: Eigenes Block-Theme der Gärtnerei Guyot – Antiqua-Überschriften, serifenloser Text, Tannengrün und Messing.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPLv2 or later
Text Domain: guyot
*/

/* ---------- Grundlagen ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; letter-spacing: .005em; }
:where(a, button):focus-visible { outline: 2px solid var(--wp--preset--color--messing); outline-offset: 3px; }
.wp-site-blocks { padding-top: 0; }
.is-style-eyebrow, .eyebrow {
  font-family: var(--wp--preset--font-family--sans) !important;
  font-size: .75rem !important; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wp--preset--color--messing); line-height: 1.2;
}
.ital { font-family: var(--wp--preset--font-family--serif); font-style: italic; }
.text-grau { color: var(--wp--preset--color--grau); }

/* ---------- Kopf ---------- */
.kopf-leiste { border-bottom: 1px solid rgba(27,38,33,.14); }
.marke { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.marke a { text-decoration: none; }
.marke .wp-block-site-title, .marke-name { font-family: var(--wp--preset--font-family--display); font-size: 1.75rem; line-height: 1; margin: 0; }
.marke-ort { font-size: .6875rem; letter-spacing: .3em; text-transform: uppercase; color: var(--wp--preset--color--grau); margin: 0; line-height: 1; }
.haupt-nav .wp-block-navigation-item__content { text-decoration: none; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; padding-block: 6px; border-bottom: 1px solid transparent; }
.haupt-nav .wp-block-navigation-item__content:hover { border-color: var(--wp--preset--color--messing); color: inherit; }
.haupt-nav .fest > .wp-block-navigation-item__content { color: var(--wp--preset--color--messing); }

/* ---------- Überschrift mit kursiver zweiter Zeile ---------- */
h1 em, h2 em, .zweizeilig em { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 400; display: block; letter-spacing: -.01em; }

/* ---------- Knöpfe ---------- */
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--tinte); border: 1px solid rgba(30,38,34,.28); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--tinte); background: transparent; color: var(--wp--preset--color--tinte); }

/* ---------- Bühne asymmetrisch: Text links, Foto rechts mit Sandfläche ---------- */
.buehne-text h1, h1, h2 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.buehne-text h1 { font-size: clamp(2.6rem, 5.2vw, 4.75rem) !important; line-height: 1.08; }
.buehne-text h1 em { margin-top: .12em; }
h2 em { margin-top: .06em; }
.buehne-text .lead { font-size: var(--wp--preset--font-size--gross); max-width: 38ch; }
@media (max-width: 1024px) {
  .wp-block-columns:has(> .buehne-text) { flex-wrap: wrap !important; }
  .wp-block-columns:has(> .buehne-text) > .wp-block-column { flex-basis: 100% !important; }
  .buehne-bild { max-width: 560px; }
}
.buehne-text .kurz { font-weight: 400; letter-spacing: .02em; }
.buehne-text .status { color: var(--wp--preset--color--grau); }
.buehne-text .fusszeile-klein { font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(30,38,34,.45); }
.buehne-bild { position: relative; }
.buehne-bild::before { content: ""; position: absolute; right: -24px; bottom: -32px; width: 46%; height: 72%; background: var(--wp--preset--color--sand); z-index: 0; }
.buehne-bild img { position: relative; z-index: 1; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (max-width: 781px) { .buehne-bild::before { right: -12px; bottom: -16px; } }

/* ---------- Bühne (Cover, Unterseiten) ---------- */
.buehne.wp-block-cover { align-items: flex-end; padding-bottom: clamp(92px, 9vw, 130px); }
.buehne .eyebrow { color: #E9D7AE; }
.buehne h1 { max-width: 12ch; }
.buehne .lead { max-width: 46ch; font-size: var(--wp--preset--font-size--gross); color: rgba(255,255,255,.92); }
.status { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .875rem; letter-spacing: .04em; color: rgba(255,255,255,.9); }
.status .punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #9BD3A4; margin-right: 8px; vertical-align: 1px; }
.status .punkt.zu { background: #E3B07A; }

/* ---------- Kacheln Hochzeit / Events ---------- */
.feste { position: relative; z-index: 2; }
.feste .wp-block-columns { gap: 20px; }
.kachel { background: #fff; box-shadow: 0 18px 40px -24px rgba(10,25,18,.45); transition: transform .3s ease; height: 100%; }
.kachel:hover { transform: translateY(-3px); }
.kachel.wp-block-media-text { grid-template-columns: 42% minmax(0,1fr) !important; min-height: 280px; }
.kachel .wp-block-media-text__media img { height: 100%; object-fit: cover; }
.kachel .wp-block-media-text__content { padding: 28px !important; display: flex; flex-direction: column; gap: 12px; }
.kachel .wp-block-media-text__content > * { margin: 0 !important; }
.kachel h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); }
.kachel p { font-size: .96875rem; color: var(--wp--preset--color--grau); }
.kachel .mehr { margin-top: auto !important; }
.mehr a, a.mehr { font-size: .8125rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--moos); text-decoration: none; }
.mehr a::after, a.mehr::after { content: " →"; }
.fakten { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8125rem !important; color: var(--wp--preset--color--tinte) !important; }
.fakten span + span::before { content: "·"; margin-right: 14px; color: var(--wp--preset--color--messing); }

/* ---------- Termine ---------- */
.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.termine li { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 14px; align-items: center; }
.datum { border: 1px solid rgba(27,38,33,.14); text-align: center; padding-block: 6px; line-height: 1; background: var(--wp--preset--color--papier); }
.datum b { display: block; font: 400 1.5rem/1 var(--wp--preset--font-family--display); }
.datum small { font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--messing); }
.termine strong { font-weight: 500; display: block; }
.termine em { font-style: normal; font-size: .875rem; color: var(--wp--preset--color--grau); }
.termine-leer { color: var(--wp--preset--color--grau); }

/* große Terminliste (Events-Seite) */
.terminliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.terminliste li { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; gap: 28px; align-items: center; padding-block: 28px; border-bottom: 1px solid rgba(27,38,33,.14); }
.terminliste li:first-child { border-top: 1px solid rgba(27,38,33,.14); }
.terminliste .datum { padding-block: 12px; }
.terminliste .datum b { font-size: 2.25rem; }
.terminliste h3 { margin: 0 0 6px; }
.terminliste h3 a { text-decoration: none; }
.terminliste p { margin: 0; color: var(--wp--preset--color--grau); }
.terminliste .info { font-size: .875rem; letter-spacing: .04em; }
.terminliste .zustand { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 8px 12px; border: 1px solid currentColor; white-space: nowrap; }
.terminliste .zustand.ausverkauft { color: #9A4A3A; }
.terminliste .zustand.karten { color: var(--wp--preset--color--moos); }

/* ---------- Sortiment / Raster ---------- */
.sortiment img, .bild-hoch img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.bild-quer img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.galerie.wp-block-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.galerie-hoch.wp-block-gallery img { aspect-ratio: 3 / 4; }

/* ---------- Band ---------- */
.band blockquote, .band .zitat { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.35; margin: 20px 0 0; border: 0; padding: 0; }
.band .eyebrow { color: #E2C98F; }

/* ---------- Schritte ---------- */
.schritte .nr { font-family: var(--wp--preset--font-family--display); font-size: 3rem; line-height: 1; color: var(--wp--preset--color--messing); margin: 0; }

/* ---------- Öffnungszeiten ---------- */
.zeiten table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.zeiten td { padding: 11px 0; border: 0; border-bottom: 1px solid rgba(27,38,33,.14); }
.zeiten td:last-child { text-align: right; }
.zeiten tr.heute td { color: var(--wp--preset--color--moos); font-weight: 500; }
.zeiten-sonder-titel { margin: 22px 0 2px !important; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--messing); }
.zeiten-sonder td small { display: block; font-size: .8125rem; opacity: .75; }

/* ---------- Fuß ---------- */
.fuss { background: var(--wp--preset--color--tinte); color: rgba(250,249,246,.86); font-size: .9375rem; }
.fuss h2 { font-size: 1.5rem; color: var(--wp--preset--color--papier); }
.fuss a { color: var(--wp--preset--color--papier); text-decoration-color: var(--wp--preset--color--messing); text-underline-offset: 4px; }
.fuss .eyebrow { color: #CDAA6A; }
.fuss .zeiten td { border-bottom-color: rgba(250,249,246,.16); }
.fuss .zeiten tr.heute td { color: #B9D6C2; }
.fuss-unten { font-size: .875rem; color: rgba(250,249,246,.6); border-top: 1px solid rgba(250,249,246,.14); padding-top: 20px; }
.fuss-unten a { text-decoration: none; }

/* ---------- Mobil ---------- */
@media (max-width: 781px) {
  .kachel.wp-block-media-text { grid-template-columns: 100% !important; }
  .kachel .wp-block-media-text__media img { aspect-ratio: 16 / 9; height: auto; }
  .terminliste li { grid-template-columns: 72px minmax(0,1fr); }
  .terminliste .zustand { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Ticketshop ---------- */
.ticketshop { border: 1px solid rgba(30,38,34,.16); background: #fff; padding: clamp(20px, 4vw, 40px); }
.ticketshop-hinweis { display: grid; gap: 20px; max-width: 62ch; }
.ticketshop-hinweis p { margin: 0; color: var(--wp--preset--color--grau); font-size: .9375rem; }
.ticketshop iframe { display: block; width: 100%; }
button.wp-block-button__link { cursor: pointer; font: inherit; }
.terminliste .rechts { display: grid; gap: 10px; justify-items: end; }
.terminliste a.tickets { font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px; background: var(--wp--preset--color--tinte); color: var(--wp--preset--color--papier); text-decoration: none; white-space: nowrap; }
.terminliste a.tickets:hover { background: var(--wp--preset--color--moos); color: var(--wp--preset--color--papier); }
@media (max-width: 781px) { .terminliste .rechts { grid-column: 2; justify-items: start; } }

/* ---------- Logo in der Kopfzeile ---------- */
.marke-zeile { align-items: center; }
.marke-logo img { width: 52px; height: auto; display: block; }
.marke-zeile a { text-decoration: none; }
@media (max-width: 600px) { .marke-logo img { width: 40px; } .marke .wp-block-site-title, .marke-name { font-size: 1.4rem; } }