/*
Theme Name: Ganja Thai Massage
Theme URI: https://ganja-thaimassage.de/
Author: Thomas Reinsch
Description: OnePager-Blocktheme für Ganja Thai Massage Berlin. Traditionelle Thai-Massage, Öl-Massage und Deep Tissue.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.18.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ganja-thaimassage
Tags: one-column, block-patterns, full-site-editing, custom-colors, custom-menu
*/

/* ---------------------------------------------------------------
   Grundlagen
   --------------------------------------------------------------- */

:root {
  --ganja-linie: var(--wp--preset--color--linie);
  --ganja-radius: 6px;
}

/* WordPress setzt zwischen den Blöcken der obersten Ebene den globalen
   Blockabstand (:where(.wp-site-blocks) > *). Dadurch klaffte je eine
   24-px-Fuge zwischen Kopfbereich und Inhalt sowie zwischen Inhalt und
   Fußbereich, in der die Seitenfarbe durchschien. Die Bereiche bringen
   ihren Abstand selbst mit und sollen ohne Fuge aneinanderstoßen. */
.wp-site-blocks > * { margin-block-start: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Sprungziele nicht unter den fixierten Kopf schieben */
[id] { scroll-margin-top: 6rem; }

/* Tastaturfokus sichtbar halten */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--wp--preset--color--gruen);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   Die Inhaltsachse

   Logo im Kopfbereich und Text im Hero müssen an derselben Kante
   beginnen. Beide Bereiche sind unterschiedlich aufgebaut – der eine ist
   eine Flex-Zeile, der andere ein Textblock über einem Foto –, deshalb
   bekommen sie hier dieselbe Regel statt sich auf die Layout-Klassen von
   WordPress zu verlassen. Deren .alignwide-Begrenzung hängt am erzeugten
   Container und greift nicht überall gleich.

   Der Innenabstand liegt jeweils am umgebenden Bereich, nicht hier – sonst
   verschiebt er die Kante gegenüber dem anderen Bereich.
   --------------------------------------------------------------- */

.ganja-achse {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 0;
}

/* ---------------------------------------------------------------
   Wiederkehrende Textrollen
   --------------------------------------------------------------- */

/* Kleine Vorzeile über Überschriften: GANJA – THAI MASSAGE BERLIN */
.ganja-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--gruen);
  margin-bottom: 0;
}

.ganja-eyebrow--leise { color: var(--wp--preset--color--text-leise); }

/* Kleingedrucktes, etwa Hinweise unter dem Preisblock */
.ganja-klein {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-leise);
}

/* ---------------------------------------------------------------
   Zierelemente: Goldlinie mit Lotus
   --------------------------------------------------------------- */

.ganja-zierlinie {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--wp--preset--color--gold);
}

.ganja-zierlinie::before,
.ganja-zierlinie::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold-hell), transparent);
}

/* Links ausgerichtet: nur eine Linie nach rechts */
.ganja-zierlinie--links::before { display: none; }
.ganja-zierlinie--links { justify-content: flex-start; }
.ganja-zierlinie--links::after { max-width: 190px; }

.ganja-zierlinie svg { flex: 0 0 auto; display: block; }

/* Alleinstehendes Lotus-Ornament über zentrierten Überschriften.
   width:fit-content ist nötig, damit margin-inline:auto überhaupt greift –
   ein Block ohne eigene Breite füllt die Zeile und zentriert nichts. */
.ganja-lotus {
  display: block;
  width: fit-content;
  margin-inline: auto;
  color: var(--wp--preset--color--gold);
}

/* ---------------------------------------------------------------
   Kopfbereich
   --------------------------------------------------------------- */

/* Der Kopfbereich läuft über die volle Breite; der Innenabstand hält den
   Inhalt vom Fensterrand fern, unabhängig vom Wurzelabstand. */
.ganja-header {
  padding-inline: var(--wp--preset--spacing--30);
  position: sticky;
  /* Bezugspunkt für das aufklappende Menü auf schmalen Schirmen. */
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}

/* Wortmarke. Das Logo liegt als Bild im Theme; der relative Pfad wird gegen
   den Ort dieser Datei aufgelöst, deshalb braucht es hier kein PHP. Der
   Linktext bleibt für Screenreader und Suchmaschinen erhalten. */
.ganja-logo {
  display: block;
  width: clamp(9rem, 13vw, 11.5rem);
  aspect-ratio: 560 / 201;
  background-image: image-set(
    url("assets/images/logo.webp") type("image/webp"),
    url("assets/images/logo.png") type("image/png"));
  background-image: -webkit-image-set(
    url("assets/images/logo.webp") type("image/webp"),
    url("assets/images/logo.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  text-decoration: none;
}

/* Ältere Browser ohne image-set bekommen wenigstens das PNG. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .ganja-logo { background-image: url("assets/images/logo.png"); }
}

/* Kopfzeile: Logo links, Navigation mittig, Sprache und Telefon rechts. */
.ganja-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
}

.ganja-kopfzeile__rechts {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}

/* Navigation. Von Hand gebaut, damit die Beschriftungen je Sprache
   unterschiedlich sein können. */
.ganja-nav__liste {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ganja-nav__liste a {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--wp--preset--color--braun);
  white-space: nowrap;
}

.ganja-nav__liste a:hover { color: var(--wp--preset--color--gruen); }

/* Der Menüknopf erscheint erst auf schmalen Schirmen. */
.ganja-nav__knopf {
  display: none;
  padding: 0.4rem;
  background: none;
  border: 0;
  color: var(--wp--preset--color--braun);
  cursor: pointer;
}

/* Sprachwechsel */
.ganja-sprache {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--wp--preset--color--text-leise);
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 3px;
}

.ganja-sprache:hover {
  color: var(--wp--preset--color--gruen);
  border-color: var(--wp--preset--color--gruen);
  text-decoration: none;
}

@media (max-width: 1000px) {
  .ganja-nav__knopf { display: block; }

  /* Aufgeklappt legt sich das Menü unter die Kopfzeile. */
  .ganja-nav__liste {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    background-color: var(--wp--preset--color--sand);
    border-bottom: 1px solid var(--wp--preset--color--linie);
  }

  .ganja-nav__liste[data-offen] { display: flex; }

  .ganja-nav__liste li + li { border-top: 1px solid var(--wp--preset--color--linie); }

  .ganja-nav__liste a { display: block; padding: 0.9rem 0; }
}

/* ---------------------------------------------------------------
   Bereich: Hero
   --------------------------------------------------------------- */

.ganja-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(34rem, 68vh, 46rem);
  overflow: hidden;
}

/* Das Foto liegt als Fläche hinter allem und wird beschnitten, nie verzerrt. */
.ganja-hero__medium {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ganja-hero__medium picture,
.ganja-hero__medium img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 26%;
}

/* Der Schleier macht die linke Bildhälfte hell genug für dunkle Schrift und
   klart nach rechts auf, damit Ganja frei im Bild steht. */
.ganja-hero__schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg,
    rgba(249, 238, 225, 0.97) 0%,
    rgba(249, 238, 225, 0.95) 34%,
    rgba(249, 238, 225, 0.80) 46%,
    rgba(249, 238, 225, 0.32) 60%,
    rgba(249, 238, 225, 0.00) 74%);
}

/* Der Hero trägt denselben Außenabstand wie der Kopfbereich; die
   gemeinsame Klasse .ganja-achse setzt darin die Inhaltskante.
   Das Foto liegt absolut und wird vom Innenabstand nicht eingerückt. */
.ganja-hero { padding-inline: var(--wp--preset--spacing--30); }

.ganja-hero__inhalt { padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* WordPress zentriert die Kinder eines constrained-Layouts – und zwar mit
   !important, dagegen kommt keine Spezifität an. Deshalb tragen die beiden
   Hero-Container in patterns/hero.php bewusst layout:{"type":"default"}
   statt "constrained": ohne die Klasse is-layout-constrained greift die
   Regel gar nicht erst.

   Diese Angabe bleibt als zweite Sicherung, falls jemand das Layout im
   Editor zurückstellt. */
/* Diese Abstände standen früher als Inline-Stile in den Blöcken. Seit die
   Texte aus der Sprachdatei kommen, ist der Hero-Text gewöhnliches HTML und
   die Werte stehen hier. */
.ganja-hero__titel {
  margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--30);
}

.ganja-hero__vorspann {
  margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.7;
}

.ganja-hero .ganja-hero__text {
  max-width: 34rem;
  /* !important ist hier kein Notnagel, sondern die einzige Möglichkeit:
     WordPress setzt seine Zentrierung selbst mit !important. Ohne das
     hier bliebe die Ausrichtung davon abhängig, welches Layout im Editor
     eingestellt ist. */
  margin-inline: 0 !important;
}

/* Die zweite Schaltfläche steht auf dem Foto und braucht einen eigenen Rand. */
.ganja-knopf-hell .wp-block-button__link {
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(42, 22, 10, 0.22);
  backdrop-filter: blur(2px);
}

.ganja-knopf-hell .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(42, 22, 10, 0.4);
}

/* Im Hochformat wird nicht überlagert: der Schleier müsste so dicht sein,
   dass er Ganjas Gesicht verdeckt. Stattdessen steht der Text auf Creme und
   das Foto darunter. */
@media (max-width: 781px) {
  .ganja-hero {
    display: flex;
    flex-direction: column;
    /* Ohne dieses Zurücksetzen erbt der Hero das align-items:center der
       Desktop-Regel; das Bild bekäme dann seine Breite aus dem
       Seitenverhältnis statt aus der Spalte und liefe seitlich heraus. */
    align-items: stretch;
    min-height: 0;
    background-color: var(--wp--preset--color--sand);
  }

  .ganja-hero__medium {
    position: static;
    order: 2;
    aspect-ratio: 3 / 4;
    max-height: 72vh;
    /* Der Hero trägt seitlichen Innenabstand für den Text; das gestapelte
       Foto soll trotzdem bis an den Rand laufen. */
    margin-inline: calc(-1 * var(--wp--preset--spacing--30));
  }

  .ganja-hero__medium img { object-position: center 16%; }

  .ganja-hero__schleier { display: none; }

  .ganja-hero__inhalt {
    order: 1;
    padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }

  /* Auf Creme braucht die zweite Schaltfläche keinen Milchglaseffekt. */
  .ganja-knopf-hell .wp-block-button__link {
    background-color: transparent;
    backdrop-filter: none;
    border-color: var(--wp--preset--color--linie);
  }
}

/* Bildspalte, die immer so hoch wird wie die Textspalte daneben.
   Das Bild liegt absolut im Kasten: height:100% auf einem Flex-Element
   fällt bei automatischer Elternhöhe auf auto zurück und das Bild bliebe
   zu kurz. */
.ganja-bildspalte {
  position: relative;
  align-self: stretch;
  min-height: 26rem;
  overflow: hidden;
}

.ganja-bildspalte > picture,
.ganja-bildspalte > img,
.ganja-bildspalte > figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
}

.ganja-bildspalte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}


/* Bildwechsel Hochformat/Querformat ohne doppelten Download */
.ganja-bild-mobil { display: none; }
@media (max-width: 781px) {
  .ganja-bild-desktop { display: none; }
  .ganja-bild-mobil { display: block; }
}

/* ---------------------------------------------------------------
   Bereich: USP-Leiste
   --------------------------------------------------------------- */

.ganja-usp { border-block: 1px solid var(--ganja-linie); }

.ganja-usp__reihe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}

.ganja-usp__spalte { display: flex; gap: 1rem; align-items: flex-start; }
.ganja-usp__spalte + .ganja-usp__spalte { border-left: 1px solid var(--ganja-linie); padding-left: 2rem; }
.ganja-usp__icon { flex: 0 0 auto; color: var(--wp--preset--color--gruen); }

.ganja-usp__titel {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--braun);
  margin: 0 0 0.4rem;
  /* Alle vier Überschriften sollen einzeilig stehen. */
  white-space: nowrap;
}

.ganja-usp__text { display: block; font-size: 0.8125rem; line-height: 1.55; margin: 0; color: var(--wp--preset--color--text-leise); }

/* Zwischen Tablet und kleinem Laptop wird aus einer Viererreihe ein Zweierblock;
   vier Spalten wären hier zu schmal für einzeilige Überschriften. */
@media (max-width: 1100px) {
  .ganja-usp__reihe { grid-template-columns: repeat(2, 1fr); }
  .ganja-usp__spalte:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 781px) {
  .ganja-usp__reihe { grid-template-columns: 1fr; }
  .ganja-usp__spalte + .ganja-usp__spalte { border-left: 0; padding-left: 0; }
  .ganja-usp__titel { white-space: normal; }
}

/* ---------------------------------------------------------------
   Bereich: Leistungen
   --------------------------------------------------------------- */

.ganja-leistungskarte {
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--ganja-linie);
  border-radius: var(--ganja-radius);
  text-align: center;
  height: 100%;
}

.ganja-leistungskarte__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--wp--preset--color--gruen);
  color: var(--wp--preset--color--weiss);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
}

/* ---------------------------------------------------------------
   Bereich: Preise
   --------------------------------------------------------------- */

.ganja-preise { border-radius: var(--ganja-radius); }

.ganja-preistabelle { width: 100%; border-collapse: collapse; }

.ganja-preistabelle th {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-leise);
  text-align: left;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--ganja-linie);
}

.ganja-preistabelle td {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--ganja-linie);
  font-size: 0.9375rem;
  color: var(--wp--preset--color--braun);
}

.ganja-preistabelle tr:last-child td { border-bottom: 0; }

@media (max-width: 781px) {
  .ganja-preistabelle th { font-size: 0.625rem; letter-spacing: 0.05em; }
  .ganja-preistabelle td { padding: 0.8rem 0; font-size: 0.8125rem; }
  .ganja-preistabelle th:not(:first-child),
  .ganja-preistabelle td:not(:first-child) { padding-left: 0.5rem; }
}

.ganja-preistabelle th:not(:first-child),
.ganja-preistabelle td:not(:first-child) { text-align: right; white-space: nowrap; }

.ganja-preistabelle td:not(:first-child) { font-variant-numeric: tabular-nums; }

/* Kontaktkasten rechts im Preisblock */
.ganja-terminbox { text-align: center; }
.ganja-terminbox__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--wp--preset--color--braun);
  text-decoration: none;
  font-size: 1.0625rem;
}
.ganja-terminbox__tel:hover { color: var(--wp--preset--color--gruen); }
.ganja-terminbox__tel svg { color: var(--wp--preset--color--gruen); }

/* ---------------------------------------------------------------
   Bereich: Über Ganja
   --------------------------------------------------------------- */

.ganja-signatur {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.75rem;
  font-style: italic;
  color: var(--wp--preset--color--gruen);
  margin: 0;
}

.ganja-zertifikat {
  /* Begrenzt, damit die Urkunde den Abschnitt nicht in die Höhe treibt.
     Sie bleibt der Abschluss der Spalte, ohne sie zu dominieren. */
  max-width: 20rem;
}

.ganja-zertifikat img {
  border-radius: 2px;
  box-shadow: var(--wp--preset--shadow--karte);
}

/* ---------------------------------------------------------------
   Standort-Hinweis unter der Signatur

   Bewusst zurückhaltend: heller Grund, dünne Goldkontur, kleines
   Symbol. Kein Aufruf zum Handeln, nur eine ruhige Ortsangabe.
   --------------------------------------------------------------- */

.ganja-ort {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: var(--wp--preset--spacing--40);
  padding: 0.95rem 1.1rem;
  background-color: var(--wp--preset--color--creme-hell);
  border: 1px solid var(--wp--preset--color--gold-hell);
  border-radius: 4px;
}

.ganja-ort .ganja-icon {
  color: var(--wp--preset--color--gruen);
  margin-top: 0.1rem;
}

.ganja-ort p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--wp--preset--color--text-leise);
}

.ganja-ort strong { color: var(--wp--preset--color--braun); }

/* ---------------------------------------------------------------
   Bereich: Bewertungen
   --------------------------------------------------------------- */

.ganja-stimme {
  border-left: 2px solid var(--wp--preset--color--gold-hell);
  padding-left: 1.25rem;
}

.ganja-sterne { color: var(--wp--preset--color--gold); letter-spacing: 0.12em; font-size: 0.9375rem; }

.ganja-zitat {
  font-size: 0.875rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--wp--preset--color--text);
  margin: 0.5rem 0 0;
}

/* ---------------------------------------------------------------
   Fußbereich
   --------------------------------------------------------------- */

.ganja-footer { padding-inline: var(--wp--preset--spacing--30); }

.ganja-fusszeile {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1fr;
  gap: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
  .ganja-fusszeile { grid-template-columns: 1fr 1fr; }
}

.ganja-fusszeile__wortmarke {
  margin: 0 0 0.6rem;
  font-family: var(--wp--preset--font-family--heading);
  font-size: 1.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--creme);
}

.ganja-fusszeile__titel {
  margin: 0 0 0.6rem;
  color: #B08D5E;
}

.ganja-fusszeile__text {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.8;
  color: #D8C9B6;
}

.ganja-fusszeile__text a { color: #D8C9B6; text-decoration: none; }
.ganja-fusszeile__text a:hover { text-decoration: underline; }
.ganja-fusszeile__hell { color: var(--wp--preset--color--creme) !important; }

.ganja-fusszeile__linie {
  margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--30);
  border: 0;
  border-top: 1px solid #4A3220;
}

.ganja-fusszeile__schluss {
  margin: 0;
  text-align: center;
  font-size: var(--wp--preset--font-size--x-small);
  color: #A8967F;
}

/* ---------------------------------------------------------------
   Google-Kasten in den Kundenstimmen
   --------------------------------------------------------------- */

.ganja-google {
  text-align: center;
  border-left: 1px solid var(--ganja-linie);
  padding-left: var(--wp--preset--spacing--30);
}

.ganja-google a { color: var(--wp--preset--color--text-leise); }
.ganja-google a:hover { color: var(--wp--preset--color--gruen); }

@media (max-width: 781px) {
  .ganja-google { border-left: 0; padding-left: 0; text-align: left; }
}

/* ---------------------------------------------------------------
   Nur für Screenreader
   --------------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Symbole
   Die gezeichneten Symbole liegen als Maske vor: die Form steckt im
   Alphakanal der PNG-Datei, die Farbe kommt aus currentColor.
   --------------------------------------------------------------- */

.ganja-icon { flex: 0 0 auto; }

.ganja-icon--maske {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: var(--ganja-maske);
          mask-image: var(--ganja-maske);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Falls ein Browser keine Masken kann, bleibt sonst ein farbiges Rechteck
   stehen. Dann lieber gar kein Symbol als ein Klotz. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .ganja-icon--maske { display: none; }
}

/* ---------------------------------------------------------------
   Schaltflächen mit Symbol
   Die Kern-Schaltfläche von WordPress kann kein Symbol aufnehmen,
   deshalb hier eine eigene, gleich aussehende Variante.
   --------------------------------------------------------------- */

.ganja-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--wp--preset--spacing--40);
}

/* Beide Schaltflächen sollen gleich breit sein: gleiche Startbreite, gleicher
   Wachstumsfaktor. Passen sie nicht nebeneinander, rutschen sie untereinander
   und bleiben dabei gleich breit. */
.ganja-knopfreihe .ganja-knopf {
  flex: 1 1 11rem;
  max-width: 14rem;
  justify-content: center;
}

.ganja-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ganja-knopf--gruen {
  background-color: var(--wp--preset--color--gruen);
  color: var(--wp--preset--color--weiss);
}

.ganja-knopf--gruen:hover {
  background-color: var(--wp--preset--color--gruen-dunkel);
  color: var(--wp--preset--color--weiss);
  text-decoration: none;
}

/* Steht auf dem Foto und braucht deshalb einen eigenen Grund. */
.ganja-knopf--hell {
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(42, 22, 10, 0.22);
  color: var(--wp--preset--color--braun);
  backdrop-filter: blur(2px);
}

.ganja-knopf--hell:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(42, 22, 10, 0.4);
  color: var(--wp--preset--color--braun);
  text-decoration: none;
}

/* Im Kopfbereich etwas gedrungener, damit die Zeile nicht auseinanderläuft. */
.ganja-knopf--kopf {
  padding: 0.7rem 1.1rem;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
}

@media (max-width: 781px) {
  .ganja-knopf--hell {
    background-color: transparent;
    backdrop-filter: none;
    border-color: var(--wp--preset--color--linie);
  }
}

/* ---------------------------------------------------------------
   Karte
   Vor dem ersten Klick steht hier nur ein Hinweis. Erst danach wird
   der Rahmen von Google nachgeladen.
   --------------------------------------------------------------- */

.ganja-standortkarte {
  position: relative;
  margin-top: var(--wp--preset--spacing--30);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ganja-linie);
  border-radius: 4px;
  background-color: var(--wp--preset--color--creme-hell);
  overflow: hidden;
}

.ganja-standortkarte__hinweis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 100%;
  padding: var(--wp--preset--spacing--30);
  text-align: center;
}

.ganja-standortkarte__hinweis .ganja-icon { color: var(--wp--preset--color--gruen); }

.ganja-standortkarte__hinweis p { margin: 0; max-width: 22rem; }

.ganja-standortkarte--geladen { background: none; }

/* ---------------------------------------------------------------
   Bereich: Atmosphäre

   Bewusst schmaler als alles andere auf der Seite: rund 65 % der
   Inhaltsachse, mittig gesetzt, ein einziges Bild. Der Kontrast zum
   breiten Standortbereich danach trägt die Gliederung.
   --------------------------------------------------------------- */

.ganja-atmosphaere { padding-inline: var(--wp--preset--spacing--30); }

.ganja-schmal {
  width: 100%;
  /* 936 px sind bei 1440 px Fensterbreite genau 65 % Inhalt und je
     17,5 % Weißraum. Als feste Obergrenze bleibt der Bereich auch auf
     breiten Bildschirmen schmaler als die 1240er-Inhaltsachse. */
  max-width: 936px;
  margin-inline: auto;
}

/* Der Absatz läuft noch schmaler als der Container, damit die Zeilen
   nicht zu lang werden. */
.ganja-atmosphaere__text {
  max-width: 34rem;
  margin-inline: auto;
}

.ganja-raum { margin: var(--wp--preset--spacing--50) 0 0; }

.ganja-raum img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ganja-radius);
}

/* ---------------------------------------------------------------
   Bereich: Standort und Anfahrt

   Der funktionale Gegenpol: volle Inhaltsachse, zwei Spalten.
   Links das Gebäude zum Wiedererkennen, rechts der Weg dorthin.
   --------------------------------------------------------------- */

.ganja-anfahrt { padding-inline: var(--wp--preset--spacing--30); }

.ganja-gebaeude { margin: var(--wp--preset--spacing--30) 0 0; }

.ganja-gebaeude img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ganja-radius);
}

/* Zurückhaltende Zeile unter dem Foto – keine Box, nur Symbol und Text. */
.ganja-ortszeile {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: var(--wp--preset--spacing--30) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--wp--preset--color--text-leise);
}

.ganja-ortszeile .ganja-icon {
  color: var(--wp--preset--color--gruen);
  margin-top: 0.1rem;
}

.ganja-ortszeile strong { color: var(--wp--preset--color--braun); }

/* ---------------------------------------------------------------
   Rechtsseiten: Impressum und Datenschutzerklärung

   Langer Fließtext braucht eine ruhige, schmale Spalte und deutlich
   abgesetzte Überschriften – hier zählt Lesbarkeit, nicht Gestaltung.
   --------------------------------------------------------------- */

.ganja-seite { padding-inline: var(--wp--preset--spacing--30); }

.ganja-seite > .wp-block-post-title {
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--xx-large);
}

.ganja-rechtstext {
  max-width: 44rem;
  margin-inline: auto;
  font-size: 0.9375rem;
  line-height: 1.75;
}

.ganja-rechtstext h2 {
  margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--20);
  font-size: 1.75rem;
}

.ganja-rechtstext h3 {
  margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
  font-size: 1.3125rem;
}

/* Die vierte Ebene steht dicht am Text und wird deshalb nicht als
   Zierschrift, sondern als kräftige Zwischenzeile gesetzt. */
.ganja-rechtstext h4 {
  margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--10);
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--wp--preset--color--braun);
}

.ganja-rechtstext p { margin: 0 0 var(--wp--preset--spacing--20); }

.ganja-rechtstext ul {
  margin: 0 0 var(--wp--preset--spacing--20);
  padding-left: 1.25rem;
}

.ganja-rechtstext li { margin-bottom: 0.4rem; }

.ganja-rechtstext a {
  color: var(--wp--preset--color--gruen);
  overflow-wrap: anywhere;
}