/*
Theme Name: Michels KFZ-Service - TwentyTwentyFive Child
Theme URI: https://www.michels-kfz-service.de/
Template: twentytwentyfive
Author: Guse IT Solutions GmbH
Author URI: https://www.guse-it.com
Description: Schlankes Child-Theme von Twenty Twenty-Five fuer den KFZ-Service Michels. Technische Blueprint-Anmutung: Stahlblau auf Papiergrund, kantige Rahmen mit Registermarken. Keine externen Bibliotheken, keine Plugins, keine geladenen Webfonts.
Version: 1.0.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: michels-kfz
*/

/* ---------------------------------------------------------------
   1. Tokens
   Farben, Abstaende und Typo liegen zusaetzlich in theme.json,
   damit sie im Backend als Palette/Presets waehlbar sind.
--------------------------------------------------------------- */
:root {
  --mk-paper: #f2f2f3;
  --mk-paper-2: #ffffff;
  --mk-ink: #1d1f20;
  --mk-ink-soft: #56595c;
  --mk-line: #c9cbcd;
  --mk-line-soft: #e2e3e5;
  --mk-steel: #4b4542;
  --mk-steel-deep: #231f20;
  --mk-steel-dark: #fff200;
  --mk-steel-tint: #fffa99;

  --mk-mark: 9px;   /* Kantenlaenge der Registermarke */
  --mk-hair: 1px;
}

html { scroll-behavior: smooth; }
body { background: var(--mk-paper); color: var(--mk-ink); }

/* Anker unter der klebenden Kopfzeile ausrichten */
:where(.wp-site-blocks) [id] { scroll-margin-top: 84px; }

a { color: var(--mk-steel-deep); text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--mk-steel); outline-offset: 2px; }
::selection { background: var(--mk-steel-tint); }

/* ---------------------------------------------------------------
   2. Flaechen
   Ruhige Haarlinie, keine Registermarken.
--------------------------------------------------------------- */
.mk-frame {
  position: relative;
  border: var(--mk-hair) solid var(--mk-line-soft);
  border-radius: 0;
  background: var(--mk-paper-2);
}
.mk-frame.mk-on-dark { border-color: rgba(35,31,32,.16); background: rgba(35,31,32,.04); }

.mk-card { padding: clamp(18px, 2vw, 26px); }
.mk-card--plain { background: transparent; border: 0; padding: 0; }

/* Leistung als Zeile statt Karte */
.mk-list { border-top: 1px solid var(--mk-line-soft); }
.mk-list > :where(div, li) {
  border-bottom: 1px solid var(--mk-line-soft);
  padding: 16px 0;
}
.mk-nr {
  font-family: var(--wp--preset--font-family--mk-heading);
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--mk-steel);
  display: block;
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------
   3. Typografie-Feinheiten
--------------------------------------------------------------- */
h1, h2, h3, h4,
.wp-block-post-title {
  font-family: var(--wp--preset--font-family--mk-heading);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

.mk-eyebrow {
  font-family: var(--wp--preset--font-family--mk-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mk-steel-deep);
}
.mk-on-steel .mk-eyebrow,
.mk-eyebrow.mk-on-steel { color: rgba(35,31,32,.7); }

.mk-lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--mk-ink-soft); }

/* Abschnittsmarke: duenne Linie ueber der Ueberschrift */
.mk-rule { border: 0; border-top: 1px solid var(--mk-line); margin: 0; }

/* ---------------------------------------------------------------
   4. Buttons
--------------------------------------------------------------- */
.wp-block-button .wp-block-button__link {
  border-radius: 0;
  font-family: var(--wp--preset--font-family--mk-heading);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 13px 26px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wp-block-button.mk-btn-primary .wp-block-button__link {
  background: var(--mk-ink);
  color: var(--mk-paper);
  border: 1px solid var(--mk-ink);
}
.wp-block-button.mk-btn-primary .wp-block-button__link:hover { background: var(--mk-steel-dark); color: #231f20; border-color: var(--mk-steel-dark); }
.wp-block-button.mk-btn-primary .wp-block-button__link:active { background: var(--mk-steel); color: var(--mk-paper); border-color: var(--mk-steel); }

.wp-block-button.mk-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--mk-ink);
  border: 1px solid var(--mk-line);
}
.wp-block-button.mk-btn-outline .wp-block-button__link:hover { border-color: var(--mk-steel); color: var(--mk-steel-deep); background: var(--mk-steel-tint); }

.mk-on-steel .wp-block-button.mk-btn-outline .wp-block-button__link {
  color: #231f20; border-color: rgba(35,31,32,.45);
}
.mk-on-steel .wp-block-button.mk-btn-outline .wp-block-button__link:hover {
  background: rgba(35,31,32,.08); border-color: #231f20; color: #231f20;
}

/* Buttons-Gruppe: sobald sie umbricht (Tablet-Breite bis Mobile), gleiche
   Breite und zentriert statt linksbuendig mit ungleichen Breiten.
   Bruchpunkt bei 1005px, siehe .mk-grid--2 in Abschnitt 8. */
@media (max-width: 1005px) {
  .wp-block-buttons {
    flex-direction: column;
    align-items: center;
  }
  .wp-block-buttons .wp-block-button {
    width: 100%;
    max-width: 360px;
  }
  .wp-block-buttons .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ---------------------------------------------------------------
   5. Kopf- und Fusszeile
--------------------------------------------------------------- */
.mk-topbar {
  font-size: 14px;
  letter-spacing: .02em;
}
.mk-topbar a { color: inherit; text-decoration: none; }
.mk-topbar a:hover { text-decoration: underline; }

.mk-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--mk-paper);
  border-bottom: 1px solid var(--mk-line);
}
.admin-bar .mk-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mk-header { top: 46px; } }

.mk-header .wp-block-navigation {
  font-family: var(--wp--preset--font-family--mk-heading);
  font-weight: 600;
  letter-spacing: .04em;
}
.mk-header .wp-block-navigation a { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.mk-header .wp-block-navigation a:hover { color: var(--mk-steel-deep); border-bottom-color: var(--mk-steel); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--mk-paper); }

.mk-header .mk-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  font-family: var(--wp--preset--font-family--mk-heading);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: var(--wp--preset--font-size--medium);
}
.mk-header .mk-nav a { text-decoration: none; color: inherit; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.mk-header .mk-nav a:hover { color: var(--mk-steel-deep); border-bottom-color: var(--mk-steel); }
.mk-footer .mk-nav { display: flex; flex-wrap: wrap; gap: 20px; }

.mk-wordmark {
  font-family: var(--wp--preset--font-family--mk-heading);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  text-decoration: none;
  color: var(--mk-ink);
  display: inline-block;
}
.mk-wordmark span { color: var(--mk-steel); }

.mk-footer { border-top: 1px solid var(--mk-line); }
.mk-footer a { text-decoration: none; }
.mk-footer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   6. Bilder: Duotone-Anmutung ohne Abhaengigkeiten
--------------------------------------------------------------- */
.mk-figure { overflow: hidden; }
.mk-figure > .wp-block-image { height: 100%; margin: 0; }
.mk-figure img { border-radius: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-hero-photo { aspect-ratio: 4 / 3; }
.mk-team-photo { aspect-ratio: 1; }
.mk-figure--duotone img { filter: grayscale(1) contrast(1.05); }
.mk-figure--duotone { position: relative; }
.mk-figure--duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mk-steel);
  mix-blend-mode: multiply;
  opacity: .38;
  pointer-events: none;
}
.mk-figure figcaption {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mk-ink-soft);
  padding-top: 10px;
}

.mk-on-dark .mk-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 1px, transparent 1px 9px),
    transparent;
  color: #9fb3c6;
}

/* Platzhalter, solange kein Bild gepflegt ist */
.mk-placeholder {
  display: grid;
  place-items: center;
  min-height: 200px;
  background:
    repeating-linear-gradient(135deg, var(--mk-line-soft) 0 1px, transparent 1px 9px),
    var(--mk-paper-2);
  color: var(--mk-ink-soft);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   7. Daten-Listen (Oeffnungszeiten, Kontaktzeilen)
--------------------------------------------------------------- */
.mk-rows :where(p) {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--mk-line-soft);
  font-size: 16px;
}
.mk-rows :where(p):last-child { border-bottom: 0; }
.mk-rows strong { font-weight: 600; }
.mk-on-steel .mk-rows :where(p) { border-bottom-color: rgba(35,31,32,.18); }

/* Stahlfeld: einzige Vollflaeche im System */
.mk-on-steel { background: var(--mk-steel-dark); color: #231f20; }
.mk-on-steel :where(h1,h2,h3,h4,strong) { color: #231f20; }
.mk-on-steel a { color: #231f20; }
/* Ausnahme: Link unter der Anfahrtskarte sitzt auf eigenem, hell/dunkel
   umschaltendem Kartenhintergrund statt auf dem festen Gelb - deshalb hier
   wieder die normale, Dark-Mode-faehige Linkfarbe statt des fixen Dunkel. */
.mk-on-steel .osm-embed a { color: var(--mk-steel-deep); }

/* ---------------------------------------------------------------
   8. Raster
--------------------------------------------------------------- */
.mk-grid { display: grid; gap: 24px; align-items: start; }
.mk-grid > * { margin-block-start: 0; }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .mk-grid--3, .mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mk-grid--3, .mk-grid--4 { grid-template-columns: 1fr; }
}
/* Hero: eigener, breiterer Bruchpunkt - bricht direkt auf eine Spalte um
   und blendet das Foto aus, statt es erst zu quetschen (Tablet + Mobile). */
@media (max-width: 1005px) {
  .mk-grid--2 { grid-template-columns: 1fr; }
  .mk-hero-photo { display: none; }
}

/* Inhaltsseiten (Impressum, Datenschutz) */
.mk-prose :where(h2) { margin-top: 2.2em; }
.mk-prose :where(p, li) { color: var(--mk-ink-soft); line-height: 1.7; }

@media print {
  .mk-header, .mk-topbar { position: static; }
}

/* ---------------------------------------------------------------
   9. Leistungs-Icon (Block kfz-michels/leistungs-icon)
--------------------------------------------------------------- */
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--mk-steel-tint);
  color: var(--mk-steel-deep);
}
.service-icon svg { width: 20px; height: 20px; }

/* Leistungen: einheitliche Mindesthoehe je Kachel/Zeile */
.mk-leistungen-list > .wp-block-group {
  min-height: 180px;
}

/* Leistungen: nicht ueber eine 2-spaltige Zwischenstufe gehen */
@media (max-width: 900px) {
  .mk-leistungen-list.mk-grid--3 { grid-template-columns: 1fr; }
  .mk-leistungen-list > .wp-block-group { min-height: 0; }
}

/* ---------------------------------------------------------------
   10. Team-Raster: gleich breite Kacheln, eine ueberzaehlige Kachel
   in der letzten Zeile zentriert sich automatisch (Flex statt Grid).
--------------------------------------------------------------- */
.mk-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mk-team-grid > .wp-block-group {
  width: calc(25% - 18px);
  flex-grow: 0;
  flex-shrink: 0;
}
/* Team: nicht ueber eine 2-spaltige Zwischenstufe gehen (gleicher Bruchpunkt wie Leistungen) */
@media (max-width: 900px) {
  .mk-team-grid > .wp-block-group { width: 100%; }
}
.mk-team-name { min-height: 2.2em; }
.mk-team-role { min-height: 4em; }
.mk-team-years { min-height: 1.6em; }

/* ---------------------------------------------------------------
   11. Anfahrtskarte (Block kfz-michels/anfahrtskarte)
--------------------------------------------------------------- */
.osm-embed {
  border: 1px solid var(--mk-line-soft);
  background-color: var(--mk-paper-2);
  overflow: hidden;
}
.osm-embed--empty {
  border-style: dashed;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mk-ink-soft);
  background-color: var(--mk-paper);
}
.osm-embed__placeholder-text {
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-inline: 1rem;
  margin: 0;
}
.osm-embed__frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}
.osm-embed__link {
  display: block;
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  text-align: right;
  border-top: 1px solid var(--mk-line-soft);
}
.osm-embed--editor .osm-embed__placeholder-text {
  padding-block: 1rem;
}

/* ---------------------------------------------------------------
   12. Dark Mode: folgt automatisch der Geraete-/Browser-Einstellung.
   Zwei Variablen-Systeme im Theme (eigene --mk-*-Tokens und die von
   WordPress aus theme.json erzeugten --wp--preset--color--mk-*)
   muessen beide ueberschrieben werden. "mk-steel-dark" bleibt bewusst
   fix Signalgelb (Markenfarbe, wie auf Visitenkarte/Werbung), keine
   Anpassung noetig. "mk-yellow-ink" bleibt aus demselben Grund fix
   dunkel (Text auf dem Gelb).
--------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --mk-paper: #17191b;
    --mk-paper-2: #1f2224;
    --mk-ink: #ece9e2;
    --mk-ink-soft: #a7adaa;
    --mk-line: #3a3f42;
    --mk-line-soft: #2c3033;
    --mk-steel: #d8d3c4;
    --mk-steel-deep: #ffffff;
    --mk-steel-tint: rgba(255, 242, 0, 0.16);

    --wp--preset--color--mk-paper: #17191b;
    --wp--preset--color--mk-ink: #ece9e2;
    --wp--preset--color--mk-ink-soft: #a7adaa;
    --wp--preset--color--mk-line: #3a3f42;
    --wp--preset--color--mk-line-soft: #2c3033;
    --wp--preset--color--mk-steel: #d8d3c4;
    --wp--preset--color--mk-steel-deep: #ffffff;
    --wp--preset--color--mk-steel-tint: rgba(255, 242, 0, 0.16);
  }
}