/*
Theme Name: ænne studio
Theme URI: https://aennestudio.de
Author: ænne studio
Description: Schlichtes Block-Theme für das Kreativstudio ænne studio in Osnabrück – Graublau, Creme, Serifen-Überschriften.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aenne-studio
*/

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(img) { height: auto; max-width: 100%; }
::selection { background: var(--wp--preset--color--graublau); color: var(--wp--preset--color--ink); }
:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 3px; }
.skip-link:focus { background: var(--wp--preset--color--paper); padding: .5rem 1rem; z-index: 999; }

/* Kicker / kleine Überzeile */
.ae-kicker {
  font-family: var(--wp--preset--font-family--sans);
  font-size: .8rem !important;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

/* Outline-Button */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  border: 1px solid currentColor;
  color: inherit;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--creme-hell);
  border-color: var(--wp--preset--color--ink);
}

/* ---------- Kopfbereich ---------- */
.ae-header { border-bottom: 1px solid rgba(31,43,46,.08); }
.ae-header .wp-block-site-title a { color: var(--wp--preset--color--ink); }
.ae-header .wp-block-navigation a:hover,
.ae-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; }
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base) !important;
  padding: 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.5rem; font-size: 1.1rem; }

/* ---------- Sektionen (Startseite) ---------- */
.wp-site-blocks > * + * { margin-block-start: 0; }
.ae-sektion { padding-block: var(--wp--preset--spacing--60); margin-block-start: 0 !important; margin-block-end: 0 !important; }
.ae-sektion > .alignwide { margin-top: var(--wp--preset--spacing--40); }
.ae-sektion > .ae-kicker + .wp-block-heading { margin-top: 0; }
.ae-kontakt-teaser { text-align: center; }
.ae-kontakt-teaser .wp-block-buttons { justify-content: center; }
.ae-hinweis { font-size: .95rem; color: var(--wp--preset--color--muted); }

/* ---------- Hero ---------- */
.ae-hero { overflow: hidden; padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.ae-hero .ae-hero__bild img {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  display: block;
  margin-inline: auto;
}
.ae-hero h1 { margin-top: .2em; }

/* ---------- Bilder mit Rahmen (Polaroid-Anmutung, schlicht) ---------- */
.ae-rahmen img {
  background: #fff;
  padding: 10px;
  box-shadow: 0 12px 30px -18px rgba(31,43,46,.45);
  border-radius: 4px;
}

/* ---------- Schritte ---------- */
.ae-schritt__nr {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 2.6rem !important;
  line-height: 1;
  color: var(--wp--preset--color--graublau);
  margin-bottom: .2rem;
}

/* ---------- Workshop-Karten (Events Manager Liste) ---------- */
.ae-workshops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-block: 1rem 0;
}
.ae-card {
  background: var(--wp--preset--color--paper);
  border: 1px solid rgba(31,43,46,.08);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ae-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(31,43,46,.5); }
.ae-card__img { display: block; aspect-ratio: 4 / 3; background: var(--wp--preset--color--graublau); overflow: hidden; }
.ae-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ae-card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ae-card__datum { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; }
.ae-card__titel { font-family: var(--wp--preset--font-family--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.15; margin: 0; }
.ae-card__titel a { text-decoration: none; color: var(--wp--preset--color--ink); }
.ae-card__ort { margin: 0; font-size: .95rem; color: var(--wp--preset--color--muted); }
.ae-card__fuss { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; border-top: 1px solid rgba(31,43,46,.08); }
.ae-card__preis { font-weight: 500; }

/* Plätze-Anzeige */
.ae-plaetze { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
.ae-plaetze::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #6f9a7a; }
.ae-plaetze--voll::before { background: #b5654e; }
.ae-plaetze--voll { color: #8a3f2c; font-weight: 500; }

.ae-link-pfeil { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.ae-link-pfeil::after { content: " →"; }

.ae-keine-termine {
  background: var(--wp--preset--color--paper);
  border: 1px dashed rgba(31,43,46,.25);
  border-radius: 6px;
  padding: 2rem;
  text-align: center;
}

/* ---------- Einzelner Workshop ---------- */
.ae-event { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.ae-event__kopf { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .ae-event__kopf { grid-template-columns: 1.1fr .9fr; } }
.ae-event__bild img { width: 100%; border-radius: 6px; display: block; }
.ae-fakten {
  background: var(--wp--preset--color--graublau-hell);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  margin: 0;
}
.ae-fakten dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.25rem; }
.ae-fakten dt { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wp--preset--color--muted); padding-top: .25rem; }
.ae-fakten dd { margin: 0; font-weight: 400; }
.ae-fakten .wp-block-button__link, .ae-fakten .ae-button { margin-top: 1.25rem; }
.ae-button {
  display: inline-block;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--creme-hell) !important;
  border-radius: 999px;
  padding: .8em 1.8em;
  text-decoration: none !important;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ae-button:hover { background: var(--wp--preset--color--graublau); color: var(--wp--preset--color--ink) !important; }
.ae-event__text { max-width: 720px; }
.ae-buchung {
  background: var(--wp--preset--color--paper);
  border: 1px solid rgba(31,43,46,.1);
  border-radius: 6px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 720px;
  scroll-margin-top: 2rem;
}
.ae-buchung h2 { margin-top: 0; }
.ae-hinweis { font-size: .95rem; color: var(--wp--preset--color--muted); }

/* ---------- Formulare (Buchung + Kontakt) ---------- */
.ae-buchung input[type="text"], .ae-buchung input[type="email"], .ae-buchung input[type="tel"],
.ae-buchung select, .ae-buchung textarea,
.ae-form input[type="text"], .ae-form input[type="email"], .ae-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-weight: 400;
  color: var(--wp--preset--color--ink);
  background: #fff;
  border: 1px solid rgba(31,43,46,.25);
  border-radius: 4px;
  padding: .7rem .85rem;
}
.ae-buchung select { width: auto; min-width: 5rem; }
.ae-buchung input:focus, .ae-buchung textarea:focus, .ae-buchung select:focus,
.ae-form input:focus, .ae-form textarea:focus { outline: 2px solid var(--wp--preset--color--graublau); outline-offset: 1px; border-color: var(--wp--preset--color--ink); }
.ae-buchung label, .ae-form label { display: block; font-weight: 400; margin-bottom: .3rem; }
.ae-buchung p, .ae-form p { margin: 0 0 1rem; }
.ae-buchung input[type="checkbox"], .ae-form input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin-right: .5rem; vertical-align: -.15rem; accent-color: var(--wp--preset--color--ink); }
.ae-buchung .em-booking-form-details, .ae-buchung .em-booking-form { max-width: 100% !important; }
.ae-buchung input[type="submit"], .ae-buchung button[type="submit"], .ae-buchung .em-booking-submit,
.ae-form button[type="submit"] {
  background: var(--wp--preset--color--ink) !important;
  color: var(--wp--preset--color--creme-hell) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: .85em 2em !important;
  font: inherit !important;
  font-size: .95rem !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  width: auto !important;
}
.ae-buchung input[type="submit"]:hover, .ae-form button[type="submit"]:hover { background: var(--wp--preset--color--graublau) !important; color: var(--wp--preset--color--ink) !important; }
.ae-buchung table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.ae-buchung table th, .ae-buchung table td { text-align: left; padding: .5rem .25rem; border-bottom: 1px solid rgba(31,43,46,.12); font-weight: 400; }
.ae-form .ae-hp { position: absolute !important; left: -9999px !important; }
.ae-meldung { padding: 1rem 1.25rem; border-radius: 6px; margin-bottom: 1.25rem; }
.ae-meldung--ok { background: #e3eee5; }
.ae-meldung--fehler { background: #f6e1db; }
.em-booking-message-success, .em-booking-message-error, .em-booking-message { padding: 1rem 1.25rem; border-radius: 6px; margin-bottom: 1rem; }
.em-booking-message-success { background: #e3eee5; }
.em-booking-message-error { background: #f6e1db; }

/* ---------- Footer ---------- */
.ae-footer a { color: var(--wp--preset--color--ink); }
.ae-footer .wp-block-site-title a { text-decoration: none; }
.ae-footer__unten { border-top: 1px solid rgba(31,43,46,.25); margin-top: var(--wp--preset--spacing--50) !important; padding-top: var(--wp--preset--spacing--30); }

/* ---------- Mobile Feinschliff ---------- */
@media (max-width: 781px) {
  .ae-hero .wp-block-columns { flex-direction: column-reverse; }
  .ae-hero .ae-hero__bild img { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ae-card, .ae-card:hover { transition: none; transform: none; }
}