/* Tarraco Guild — Layout und Komponenten.
   Farben, Schriftgroessen und Abstaende kommen aus theme.json.
   Diese Datei enthaelt nur, was theme.json nicht ausdruecken kann:
   Medienabfragen, Raster und Zustaende. */

:root{
  --tg-pad: 20px;
  --tg-e: var(--wp--custom--ease, cubic-bezier(.16,1,.3,1));
  --tg-r: var(--wp--custom--radius, 14px);
}
@media (min-width: 900px){ :root{ --tg-pad: 48px; } }

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; overflow-x:hidden; }

:focus-visible{
  outline:2px solid var(--wp--preset--color--sea);
  outline-offset:3px;
  border-radius:3px;
}
/* Sand ist eine Flaechenfarbe: Markierung, Linien, Flaechen. Niemals Text.
   Fuer Text steht --wp--preset--color--sand-text bereit. */
::selection{ background:var(--wp--preset--color--sand); color:var(--wp--preset--color--ink); }

/* Keine Schatten, nirgends (Bauanweisung §5) */
*, *::before, *::after{ box-shadow:none !important; }

/* Sprunglink zum Inhalt. WordPress liefert ihn in Block-Themes mit;
   hier bekommt er nur das Aussehen des Entwurfs. */
.skip-link.screen-reader-text:focus{
  left:var(--tg-pad); top:10px; z-index:100000;
  background:var(--wp--preset--color--sea); color:var(--wp--preset--color--paper);
  font-family:var(--wp--preset--font-family--text); font-size:15px;
  padding:10px 16px; border-radius:8px; text-decoration:none;
}

/* ---------- Textbausteine ---------- */

.tg-kicker{
  font-size:var(--wp--preset--font-size--kicker);
  font-weight:500; color:var(--wp--preset--color--sea); letter-spacing:.01em;
}
.tg-body{ color:var(--wp--preset--color--ink-2); max-width:var(--wp--custom--measure, 56ch); margin-left:0 !important; margin-right:auto !important; }
.tg-tiny{
  font-size:var(--wp--preset--font-size--tiny);
  color:var(--wp--preset--color--ink-2); line-height:1.5;
}
h1,h2,h3,h4,h5,h6{ text-wrap:balance; }

.tg-lnk{
  color:var(--wp--preset--color--sea); text-decoration:none;
  border-bottom:1.5px solid rgba(14,90,82,.28);
  transition:border-color 180ms var(--tg-e);
}
.tg-lnk:hover{ border-bottom-color:var(--wp--preset--color--sea); }

/* ---------- Buttons ---------- */

.wp-block-button__link, .tg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:54px; padding:0 30px;
  background:var(--wp--preset--color--sea); color:var(--wp--preset--color--paper);
  border:0; border-radius:var(--wp--custom--radius-pill, 999px);
  font-family:var(--wp--preset--font-family--text);
  font-size:16px; font-weight:500; line-height:1; cursor:pointer; text-decoration:none;
  transition:background var(--wp--custom--duration-hover, 200ms) var(--tg-e),
             transform var(--wp--custom--duration-hover, 200ms) var(--tg-e);
}
.wp-block-button__link:hover, .tg-btn:hover{
  background:var(--wp--preset--color--sea-2); transform:translateY(-1px);
}
.tg-btn-on-sea, .is-style-on-sea .wp-block-button__link{
  background:var(--wp--preset--color--paper); color:var(--wp--preset--color--sea);
}
.tg-btn-on-sea:hover, .is-style-on-sea .wp-block-button__link:hover{ background:#fff; }

/* ---------- Bilder ---------- */

.tg-shot{
  background:var(--wp--preset--color--warm); border-radius:var(--tg-r);
  position:relative; overflow:hidden;
}
.tg-shot picture{ display:block; width:100%; height:100%; }
.tg-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.tg-shot-portrait{ aspect-ratio:4/5; min-height:300px; }
.tg-shot-round, .tg-shot-round img{ border-radius:999px; }
.tg-shot-round{ aspect-ratio:1; }

.tg-band{ margin-top:var(--wp--preset--spacing--60); }
.tg-band picture{ display:block; width:100%; }
.tg-band img{
  width:100%; height:clamp(260px, 42vw, 520px);
  object-fit:cover; display:block; border-radius:0;
}
.tg-band figcaption, .tg-cred{
  font-size:12.5px; color:var(--wp--preset--color--ink-2);
  padding-top:10px; text-align:left;
}

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

.tg-hd{
  position:sticky; top:0; z-index:20;
  background:rgba(253,251,246,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--wp--preset--color--line);
}
.tg-hd .tg-hd__in{
  display:flex; justify-content:space-between; align-items:center;
  height:62px; gap:14px; max-width:1180px; margin:0 auto;
  padding-left:var(--tg-pad); padding-right:var(--tg-pad);
}
.tg-mark{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:17px; letter-spacing:-.02em;
  text-decoration:none; white-space:nowrap; color:var(--wp--preset--color--ink);
}
.tg-nav{ display:flex; align-items:center; gap:22px; }
.tg-nav a{ font-size:14px; color:var(--wp--preset--color--ink-2); text-decoration:none; }
.tg-nav a:hover{ color:var(--wp--preset--color--ink); }
.tg-cta-sm{
  display:inline-flex; align-items:center; height:38px; padding:0 16px;
  background:var(--wp--preset--color--sea); color:#fff !important;
  border-radius:999px; font-size:14px; font-weight:500; text-decoration:none;
  transition:background var(--wp--custom--duration-hover, 200ms) var(--tg-e);
}
.tg-cta-sm:hover{ background:var(--wp--preset--color--sea-2); }

.tg-menu{ display:none; position:relative; }
.tg-menu__btn{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--wp--preset--font-family--text);
  font-size:14px; color:var(--wp--preset--color--ink-2);
}
.tg-menu__pop{
  position:absolute; right:0; top:30px; background:var(--wp--preset--color--paper);
  border:1px solid var(--wp--preset--color--line); border-radius:12px;
  padding:10px 4px; min-width:170px;
}
.tg-menu__pop[hidden]{ display:none; }
.tg-menu__pop a{ display:block; padding:9px 16px; font-size:15px; text-decoration:none; }
@media (max-width: 720px){
  .tg-nav .tg-nav__link{ display:none; }
  .tg-menu{ display:block; }
}

/* ---------- Hero und Tisch ---------- */

.tg-hero{ padding-top:clamp(28px, 4.5vh, 48px); }
.tg-hero h1{ max-width:12ch; margin-left:0 !important; margin-right:auto !important; }
.tg-hero .tg-lead{
  font-size:clamp(17px, 1.6vw, 19px); color:var(--wp--preset--color--ink-2);
  max-width:42ch; margin-top:14px; margin-left:0 !important; margin-right:auto !important;
}

.tg-tbl{ padding-top:clamp(28px, 4vw, 44px); }
.tg-tbl__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:8px; padding-bottom:12px; border-bottom:1px solid var(--wp--preset--color--line);
}
.tg-tbl__head .t{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:16px; letter-spacing:-.01em;
}
.tg-tbl__head .s{ font-size:13.5px; color:var(--wp--preset--color--ink-2); }

.tg-board{
  display:grid; gap:9px; margin-top:20px;
  grid-template-columns:1fr auto 1fr; align-items:stretch;
}
.tg-board__side{ display:grid; gap:9px; align-content:center; }
.tg-slab{
  background:var(--wp--preset--color--sea); color:var(--wp--preset--color--paper);
  border-radius:12px; min-height:190px;
  display:flex; align-items:center; justify-content:center;
  padding:16px 12px; text-align:center;
}
.tg-slab span{
  font-family:var(--wp--preset--font-family--display);
  font-weight:500; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  writing-mode:vertical-rl; transform:rotate(180deg); line-height:1.5;
}
.tg-seat{
  border:1px solid var(--wp--preset--color--line); border-radius:11px; background:#fff;
  padding:11px 13px; min-height:66px;
  display:flex; flex-direction:column; justify-content:center;
  transition:border-color var(--wp--custom--duration-hover, 200ms) var(--tg-e),
             transform var(--wp--custom--duration-hover, 200ms) var(--tg-e);
}
.tg-seat b{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:14px; letter-spacing:-.01em; line-height:1.15;
}
.tg-seat i{
  font-style:normal; font-size:12.5px; color:var(--wp--preset--color--ink-2); margin-top:3px;
}
.tg-seat:hover{ border-color:#CFC6B2; transform:translateY(-2px); }
.tg-seat-empty{
  border-style:dashed; background:transparent; color:var(--wp--preset--color--ink-2);
  align-items:center; text-align:center; font-size:13px;
}
.tg-seat-empty:hover{ transform:none; border-color:var(--wp--preset--color--line); }

@media (min-width: 880px){
  .tg-board{ grid-template-columns:1fr; gap:11px; }
  .tg-board__side{ grid-auto-flow:column; grid-auto-columns:1fr; gap:11px; }
  .tg-slab{ min-height:66px; }
  .tg-slab span{ writing-mode:horizontal-tb; transform:none; }
  .tg-seat{ min-height:74px; }
}
/* Padding statt margin: ohne Tisch ist dies das erste Kind, und WordPress
   setzt dort margin-block-start auf 0. */
.tg-tbl__foot{
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; padding-top:22px;
}
.tg-tbl__foot .tg-tiny{ max-width:36ch; margin-left:0 !important; margin-right:auto !important; }

/* ---------- Abschnitte ---------- */

.tg-sec{ padding-top:var(--wp--preset--spacing--70); }
.tg-sec-line{
  border-top:1px solid var(--wp--preset--color--line);
  margin-top:var(--wp--preset--spacing--70);
}

.tg-two{ display:grid; grid-template-columns:1fr; gap:30px; }
@media (min-width: 900px){
  .tg-two{ grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
}

/* Aufnahmekriterien */
.tg-crit > div{
  padding:20px 0; border-top:1px solid var(--wp--preset--color--line);
  display:grid; gap:4px;
}
.tg-crit > div:last-child{ border-bottom:1px solid var(--wp--preset--color--line); }
.tg-crit h2,
.tg-crit h3{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; letter-spacing:-.025em;
  font-size:clamp(21px, 2.9vw, 30px); line-height:1.08; margin:0;
}
.tg-crit p{ color:var(--wp--preset--color--ink-2); max-width:46ch; margin:0; margin-right:auto !important; margin-left:0 !important; }
@media (min-width: 860px){
  .tg-crit > div{ grid-template-columns:1.05fr 1fr; gap:40px; align-items:baseline; }
}

/* Ablaufschritte */
.tg-steps{ list-style:none; counter-reset:s; margin-top:4px; padding:0; }
.tg-steps li{
  counter-increment:s; display:grid; grid-template-columns:26px 1fr; gap:13px;
  padding:12px 0; align-items:baseline;
}
.tg-steps li::before{
  content:counter(s);
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:18px;
  /* Sand #D9A566 erreicht auf Papier nur 2.13:1. Als Textfarbe gilt der
     abgedunkelte Ton: 5.50:1 auf Papier, 4.96:1 auf Warm. 18px bei Schnitt 600
     zaehlt nicht als grosse Schrift, es gilt der volle Wert von 4.5:1. */
  color:var(--wp--preset--color--sand-text);
}
/* Der Listen-Block gibt den Text direkt im li aus, nicht in einem p. */
.tg-steps li{ color:var(--wp--preset--color--ink-2); }
.tg-steps li::before{ color:var(--wp--preset--color--sand-text); }
.tg-steps p{ color:var(--wp--preset--color--ink-2); margin:0; }

/* Terminliste */
.tg-lg{
  margin-top:26px; border-radius:var(--tg-r); overflow:hidden;
  background:var(--wp--preset--color--warm);
}
.tg-lg__row{
  display:grid; grid-template-columns:1fr; gap:4px; padding:18px 22px;
  border-bottom:1px solid rgba(23,33,31,.08);
  transition:background 180ms var(--tg-e);
  color:inherit; text-decoration:none;
}
.tg-lg__row:last-child{ border-bottom:none; }
.tg-lg__row:hover{ background:#EFE8D9; }
.tg-lg__num{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; letter-spacing:-.02em; font-size:23px;
  font-variant-numeric:tabular-nums;
}
.tg-lg__meta{ font-size:15px; color:var(--wp--preset--color--ink-2); }
/* Ein Termin ohne Datum steht leiser da. Nicht ueber Deckkraft — das
   unterschreitet den Kontrast (1.99:1). Ueber die Beitextfarbe: 4.87:1. */
.tg-lg__row-tba .tg-lg__num{ color:var(--wp--preset--color--ink-2); font-weight:500; }
.tg-lg__row-tba:hover{ background:transparent; }
.tg-lg__empty{
  padding:26px 22px; color:var(--wp--preset--color--ink-2);
  font-size:15px; text-align:center;
}
.tg-pill{
  display:inline-block; font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; background:rgba(14,90,82,.1);
  color:var(--wp--preset--color--sea); border-radius:999px;
  padding:3px 10px; margin-left:9px; vertical-align:3px;
  font-family:var(--wp--preset--font-family--text);
}
@media (min-width: 760px){
  .tg-lg__row{ grid-template-columns:210px 1fr auto; align-items:center; gap:24px; }
  .tg-lg__meta-right{ text-align:right; }
}

/* Was es nicht ist */
.tg-neg > *{ padding:18px 0; border-top:1px solid var(--wp--preset--color--line); }
.tg-neg > *:last-child{ border-bottom:1px solid var(--wp--preset--color--line); }
.tg-neg strong{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:clamp(19px, 2.5vw, 25px);
  letter-spacing:-.02em; margin-right:9px;
}
.tg-neg span{ color:var(--wp--preset--color--ink-2); }

/* Roadmap */
.tg-road{ display:grid; grid-template-columns:1fr; gap:24px; margin-top:28px; }
@media (min-width: 760px){ .tg-road{ grid-template-columns:repeat(3, 1fr); gap:32px; } }
.tg-road h3{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:16px; padding-bottom:9px;
  border-bottom:2px solid var(--wp--preset--color--line);
  letter-spacing:0; line-height:1.3; margin:0;
}
.tg-road-now h3{ border-bottom-color:var(--wp--preset--color--sea); }
.tg-road ul{ list-style:none; padding:0; margin:0; }
.tg-road li{
  padding:9px 0; border-bottom:1px solid var(--wp--preset--color--line); font-size:16px;
}
.tg-road-soft li{ color:var(--wp--preset--color--ink-2); }

/* Wer dahinter steckt */
.tg-who{ display:grid; grid-template-columns:1fr; gap:24px; padding-top:26px; }
@media (min-width: 760px){
  .tg-who{ grid-template-columns:200px 1fr; gap:44px; align-items:start; }
}
.tg-res{
  background:var(--wp--preset--color--warm); border-radius:var(--tg-r);
  padding:26px 24px; margin-top:32px;
}

/* Schlussband */
.tg-close{
  background:var(--wp--preset--color--sea); color:var(--wp--preset--color--paper);
  margin-top:var(--wp--preset--spacing--80);
  padding-top:clamp(56px, 8vw, 96px); padding-bottom:clamp(56px, 8vw, 96px);
}
.tg-close h2{ color:var(--wp--preset--color--paper); max-width:15ch; margin-left:0 !important; margin-right:auto !important; }
.tg-close p{ color:rgba(253,251,246,.75); max-width:44ch; margin-top:14px; margin-left:0 !important; margin-right:auto !important; }
.tg-close .tg-close__row{
  display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; margin-top:30px;
}
.tg-close__when{
  font-family:var(--wp--preset--font-family--display);
  font-weight:600; font-size:18px; letter-spacing:-.02em;
}
.tg-close__sub{ font-size:14.5px; color:rgba(253,251,246,.7); }

/* Fussbereich */
.tg-ft{ background:var(--wp--preset--color--warm); padding:46px 0 52px; }
.tg-ft__in{
  display:grid; gap:22px; max-width:1180px; margin:0 auto;
  padding-left:var(--tg-pad); padding-right:var(--tg-pad);
}
@media (min-width: 760px){
  .tg-ft__in{ grid-template-columns:1fr auto; align-items:end; }
}
.tg-ft__links{ display:flex; flex-wrap:wrap; gap:10px 20px; font-size:14.5px; }
.tg-ft a{ color:var(--wp--preset--color--ink-2); text-decoration:none; }
.tg-ft a:hover{ color:var(--wp--preset--color--ink); }

/* ---------- Einblendung ---------- */

/* Ausgeblendet wird nur, wenn JavaScript laeuft und die Elemente auch wieder
   einblenden kann. Ohne Skript steht der Inhalt sofort da. */
.tg-js .tg-rise{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--wp--custom--duration-rise, 520ms) var(--tg-e),
             transform var(--wp--custom--duration-rise, 520ms) var(--tg-e);
}
.tg-js .tg-rise.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .tg-js .tg-rise{ opacity:1; transform:none; transition:none; }
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ---------- Innenseiten ---------- */

.tg-page{ padding-top:clamp(28px, 4.5vh, 48px); padding-bottom:var(--wp--preset--spacing--70); }
.tg-page__body > * + *{ margin-top:18px; }
.tg-page__body h2{ margin-top:var(--wp--preset--spacing--50); }
.tg-page__body h3{ margin-top:var(--wp--preset--spacing--40); }
.tg-page__body p{ color:var(--wp--preset--color--ink-2); max-width:var(--wp--custom--measure, 56ch); margin-left:0 !important; margin-right:auto !important; }
.tg-page__body ul, .tg-page__body ol{ padding-left:1.2em; color:var(--wp--preset--color--ink-2); }
.tg-page__body li{ margin-top:6px; }

/* ---------- Textbreiten aus dem Referenzentwurf ---------- */

.tg-w12{ max-width:12ch; margin-left:0 !important; margin-right:auto !important; }
.tg-w13{ max-width:13ch; margin-left:0 !important; margin-right:auto !important; }
.tg-w15{ max-width:15ch; margin-left:0 !important; margin-right:auto !important; }
.tg-w16{ max-width:16ch; margin-left:0 !important; margin-right:auto !important; }
.tg-w18{ max-width:18ch; margin-left:0 !important; margin-right:auto !important; }
.tg-w26{ max-width:26ch; margin-left:0 !important; margin-right:auto !important; }

/* ---------- Raster gegen die Flow-Margins von WordPress ---------- */

/* WordPress gibt jedem Geschwisterblock margin-block-start, ausser dem ersten.
   In eigenen Rastern verschiebt das die erste Spalte gegen die uebrigen. */
.tg-road > *,
.tg-two > *,
.tg-who > *,
.tg-crit > *,
.tg-neg > *,
.tg-board > *,
.tg-board__side > *,
.tg-tbl__foot > *,
.tg-hd__in > *,
.tg-nav > *,
.tg-ft__in > *,
.tg-ft__links > *,
.tg-close__row > *{
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Social-Links im Fussbereich: wiederholbare Liste, damit LinkedIn spaeter
   ohne Codeaenderung dazukommt (Anforderung 0). */
.tg-ft__social{ gap:14px; }
.tg-ft__social .wp-social-link{ padding:0; }
.tg-ft__social .wp-social-link a{ padding:0; }
.tg-ft__social .wp-social-link svg{ width:20px; height:20px; }

/* ---------- Luma-Overlay ---------- */

/* Lumas Schliessknopf ist 24x24 und steht vor dem iframe. Der eigene Ausgang
   steht dahinter, damit man beim Weitertabben nicht im fremden Formular
   gefangen bleibt. Beide brauchen auf dem dunklen Grund einen Fokusring,
   den man sieht. */
/* Der sichtbare Schliessknopf ist der von Luma, oben rechts. Dieser hier ist
   der Ausgang fuer die Tastatur: er steht hinter dem iframe und taucht auf,
   sobald er den Fokus bekommt — wie ein Sprunglink. So verdeckt er Lumas
   Oberflaeche nicht und ist trotzdem da, wenn man ihn braucht. */
.tg-luma-exit{
	position:absolute; left:50%; bottom:52px; transform:translateX(-50%);
	z-index:3; display:inline-flex; align-items:center; justify-content:center;
	min-height:44px; padding:0 22px;
	background:var(--wp--preset--color--sea); color:var(--wp--preset--color--paper);
	border:0; border-radius:var(--wp--custom--radius-pill, 999px);
	font-family:var(--wp--preset--font-family--text); font-size:15px; font-weight:500;
	cursor:pointer; white-space:nowrap;
	clip-path:inset(50%); width:1px; height:1px; min-height:0; padding:0; overflow:hidden;
}
.tg-luma-exit:focus{
	clip-path:none; width:auto; height:auto; min-height:44px; padding:0 22px; overflow:visible;
}
.tg-luma-exit:hover{ background:var(--wp--preset--color--sea-2); }

.tg-luma-sentinel{ position:absolute; width:1px; height:1px; overflow:hidden; }

.luma-checkout--close-btn:focus-visible,
.tg-luma-exit:focus-visible{
	outline:3px solid #fff;
	outline-offset:3px;
	border-radius:6px;
}

/* Das Muster "fette Einleitung, Erklaerung, Haarlinie" auch auf Textseiten.
   Dort faerbt .tg-page__body jeden Absatz in die Beitextfarbe und begrenzt
   ihn auf 56 Zeichen — beides gilt fuer diese Zeilen nicht. */
.tg-neg p{ max-width:none; }
.tg-neg strong{ color:var(--wp--preset--color--ink); }