/* =========================================================================
   WordPress- und Elementor-Anpassungen

   Alles, was nicht aus der HTML-Vorlage stammt, sondern nur im Zusammenspiel
   mit WordPress, dem Admin-Bar oder Elementor gebraucht wird, liegt hier.
   Die Vorlagen-Dateien (tokens, base, layout, components, hero) bleiben
   unverändert, damit sie mit der HTML-Fassung vergleichbar bleiben.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Admin-Bar: der fixe Header muss darunter rutschen
   ------------------------------------------------------------------------- */

body.admin-bar .header { top: 32px; }
body.admin-bar .mobile-nav { inset: calc(var(--header-height) + 32px) 0 auto 0; }
html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-height) + 32px + var(--space-4)); }

@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
  body.admin-bar .mobile-nav { inset: calc(var(--header-height) + 46px) 0 auto 0; }
}

/* -------------------------------------------------------------------------
   Navigation aus wp_nav_menu

   Der eigene Walker gibt reine <a>-Elemente aus, wie in der Vorlage.
   Falls doch eine Liste ankommt (Fallback), wird sie hier eingeebnet.
   ------------------------------------------------------------------------- */

.nav ul, .mobile-nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.nav li, .mobile-nav li { display: contents; }

/* -------------------------------------------------------------------------
   Einheitliches Linkverhalten auf der ganzen Website (Kundenwunsch):
   Links sind NIE dauerhaft unterstrichen. Beim Überfahren (und bei
   Tastatur-Fokus) bekommt jeder Link dieselbe Unterstreichung.
   ------------------------------------------------------------------------- */

a {
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Auch für Links in Elementor-Inhalten: Elementors eigenes CSS setzt
   ".elementor a { text-decoration: none }" und lädt nach dem Theme –
   die zusätzlichen Selektoren übertrumpfen das per Spezifität. */
a:hover,
a:focus-visible,
.elementor a:hover,
.elementor a:focus-visible { text-decoration: underline; }

/* Vorlagen-Stile mit dauerhafter Unterstreichung zurücksetzen
   (Kontaktwege in "So erreichst du uns" und im Asphaltband). */
.ways b a,
.asphalt__ways a { text-decoration: none; }

.ways b a:hover,
.ways b a:focus-visible,
.asphalt__ways a:hover,
.asphalt__ways a:focus-visible { text-decoration: underline; }

/* Schaltflächen und Bild-Links bleiben grundsätzlich ohne Unterstreichung. */
a.btn:hover, a.btn:focus-visible,
.drive__cta:hover, .drive__cta:focus-visible,
.skip-link:hover, .skip-link:focus-visible,
.logo:hover, .logo:focus-visible { text-decoration: none; }

/* -------------------------------------------------------------------------
   Elementor

   Die Seiten bestehen aus einem randlosen Container, die Widgets bringen
   ihre Sektionen samt .container selbst mit. Damit zwischen den Widgets
   keine Lücken oder Einzüge entstehen:
   ------------------------------------------------------------------------- */

.elementor-widget-jh_lede,
.elementor-widget-jh_scene,
.elementor-widget-jh_kontaktband,
.elementor-widget-jh_klassen,
.elementor-widget-jh_ablauf,
.elementor-widget-jh_preise,
.elementor-widget-jh_panel,
.elementor-widget-jh_team,
.elementor-widget-jh_anmeldung,
.elementor-widget-jh_kontakt,
.elementor-widget-jh_abschnitt,
.elementor-widget-jh_rechtstext { width: 100%; }

/* Elementor setzt margin-bottom auf Widgets – hier unerwünscht */
.elementor-widget[class*="elementor-widget-jh_"] { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Inhalt ohne Elementor (Impressum, Datenschutz, Blog-Fallback)
   ------------------------------------------------------------------------- */

.entry { padding-top: calc(var(--header-height) + clamp(2rem, 6vw, 4rem)); }

.entry__title {
  font-size: var(--display-md);
  margin-bottom: var(--space-6);
}

.entry-content > * + * { margin-top: var(--space-4); }

/* Linksbündige Lesespalte: Der Text beginnt an der linken Inhaltskante
   (voller .container), die Zeilenlänge bleibt trotzdem begrenzt. */
.entry-content--measure { max-width: var(--container-md); }

.entry-content h2 { font-size: var(--text-2xl); margin-top: var(--space-8); }
.entry-content h3 { font-size: var(--text-xl); margin-top: var(--space-6); }

.entry-content ul,
.entry-content ol { padding-left: 1.25rem; }

.entry-content img { border-radius: var(--radius-card); height: auto; }

.entry-content a { color: var(--fg-brand); }

/* -------------------------------------------------------------------------
   Mobil-Optimierung

   Gesammelte Verfeinerungen für schmale Viewports. Liegt bewusst hier und
   nicht in den Vorlagen-Dateien, damit die mit der HTML-Fassung
   vergleichbar bleiben. wp.css lädt als Letztes und überschreibt sauber.
   ------------------------------------------------------------------------- */

/* Kompakterer fixer Header: 92px fressen auf dem Handy zu viel Höhe.
   Alles hängt an --header-height (Lede-Abstand, Mobilmenü, Scroll-Anker),
   deshalb genügt es, das Token zu verkleinern. */
@media (max-width: 48rem) {
  :root { --header-height: 4.5rem; }
  .logo img { height: 2.6rem; }
}

/* Der Kontakt-Button passt neben Logo und Burger nicht mehr in die Zeile.
   Unter 44rem bleibt nur das Telefon-Symbol übrig (der Linktext liegt im
   aria-label, für Screenreader geht nichts verloren). */
@media (max-width: 44rem) {
  .header__cta { width: var(--tap-target); padding: 0; gap: 0; }
  .header__cta-label { display: none; }
}

/* Klassenliste: statt alles untereinander ein kompaktes Raster –
   Schild und Name in einer Zeile, Alter rechts daneben, Text darunter. */
@media (max-width: 47.99rem) {
  .row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "key  name age"
      "text text text";
    align-items: center;
    row-gap: var(--space-2);
  }
  .row__key  { grid-area: key; }
  .row__name { grid-area: name; }
  .row__age  { grid-area: age; }
  .row__text { grid-area: text; }
}

/* Team: untereinander gestapelte 3:4-Fotos würden den ganzen Bildschirm
   füllen. Auf dem Handy wird jede Person zur liegenden Karte –
   kleines Foto links, Name, Rolle und Text rechts daneben. */
@media (max-width: 45.99rem) {
  .person {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: var(--space-4);
    align-items: start;
  }
  .person__photo {
    grid-row: span 3;
    margin-bottom: 0;
    font-size: var(--text-xl);
  }
  .person p { margin-top: var(--space-2); }
}

/* Öffnungszeiten: Label und Zeit untereinander, wenn beides nebeneinander
   nicht mehr lesbar hinpasst. */
@media (max-width: 30rem) {
  .hours dl > div { grid-template-columns: 1fr; row-gap: 0; }
}

/* Kartenkasten: die feste Mindesthöhe stammt noch von der eingebetteten
   Karte. Auf dem Handy richtet sich der Kasten nach seinem Inhalt. */
@media (max-width: 60rem) {
  .mapcard { min-height: 0; }
}

/* Dunkles Panel: Info-Kasten mit etwas Abstand zum Text darüber. */
@media (max-width: 55.99rem) {
  .panel__aside { margin-top: var(--space-2); }
}

/* WordPress-Kernklassen */
.alignleft { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  margin-top: var(--space-2);
}
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}