/* Headings */
:is(.editor-styles-wrapper, .is-frontend) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-ui);
  font-weight: 700;
}

/*
:is(.editor-styles-wrapper, .is-frontend) :is(body, button, input[type="button"], input[type="submit"], .wp-block-button__link, input, textarea) {
  font-family: var(--font-body);
}
*/

/* 1) Runde, flache Container */
.tl-box{
  max-width: var(--container-max);
  margin-inline: auto;
  background: var(--tl-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  padding: clamp(16px, 3vw, 28px);
}
.tl-box--muted{ background: var(--tl-bg); }

/* 2) Kachel-/Bild-Karte */
.tl-card{
  position: relative;
  border-radius: var(--radius-md);
  overflow: clip;
}
.tl-card__image{ display:block; width:100%; height:auto; }
.tl-card__cap{
  position:absolute; inset:auto 0 0 0;
  padding: clamp(10px,2.5vw,16px);
  color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent 70%);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* 3) Parallax-Sektion (Hintergrund direkt am Container) */
.tl-parallax{
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 65vh;

  /* Hintergrund kommt aus GB: */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Parallax */
}
/* iOS/klein: fixed deaktivieren */
@media (max-width: 980px){
  .tl-parallax{ background-attachment: scroll; }
}

/* optionale Top-Tönung (z.B. unterm Header) */
.tl-parallax.tl-parallax--topshade::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(15,37,48,.35), transparent 180px);
  z-index: 0;
}

/* 4) Quote-Karte auf Parallax */
.tl-quote{
  z-index: 1;
  max-width: min(900px, 92vw);
  padding: clamp(18px, 3.2vw, 34px);
  border-radius: var(--radius-lg);
  
  background: var(--glass-bg);
  background: rgba(255,255,255,.5);
  border: 1px solid #ddd;

  -webkit-backdrop-filter: blur(var(--glass-blur));  
  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(6px);  
  backdrop-filter: blur(6px);

  box-shadow: var(--elev-1);
  text-align: center;
}
.tl-quote blockquote{
  margin:0;
  font-family: var(--font-ui);          /* = Amatic SC */
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.2;
  color: var(--tl-ink);
  color: var(--tl-brown, #6b4a2a);      /* dunkles Braun */
  font-style: normal;
  border-left: none;
}
.tl-quote cite{
  display:block;
  margin-top: .75rem;
  font-size: .95rem; 
  color: var(--tl-muted);
  font-style: normal;
}

/* 5) Raster für Service-Kacheln */
.tl-grid{
  max-width: var(--container-max);
  margin: clamp(20px, 4vw, 40px) auto;
  display: grid;
  gap: clamp(12px, 2.6vw, 22px);
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1000px){ .tl-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .tl-grid{ grid-template-columns: 1fr; } }