/*
Theme Name: CERT-IT
Theme URI: https://www.cert-it.com
Author: Cert-IT GmbH
Description: Block-Theme fuer cert-it.com auf Basis des Entwurfs von Thomas Michel. Alle Seitenbereiche liegen als Vorlagen (Patterns) bereit und werden im Editor mit Inhalten gefuellt.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cert-it
*/

/* ==========================================================================
   1. Grundlagen (uebernommen aus dem Entwurf)
   ========================================================================== */

:root {
  --ink: #171419;
  --wine: #641653;
  --wine-dark: #431039;
  --paper: #f3f0ea;
  --white: #fbfaf7;
  --line: #d2cdc4;
  --stone: #b9b1a7;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif }
a { color: inherit; text-decoration: none }

/* ==========================================================================
   2. Kopfbereich
   ========================================================================== */

.site-header { height: 92px; display: flex; align-items: center; padding: 0 4vw; border-bottom: 1px solid var(--line); background: var(--white); position: relative; z-index: 3 }
.brand { font-family: Georgia, serif; font-size: 27px; letter-spacing: .11em; white-space: nowrap; display: flex; align-items: center }
.brand span { background: var(--wine); color: white; padding: 13px 12px }
.brand i { font-style: normal; color: var(--wine); margin-left: 6px }
.logo-image { display: block; width: 106px; height: 68px; object-fit: contain }
.site-header nav { display: flex; gap: 34px; margin: auto; font-size: 14px }
.site-header nav a:hover { color: var(--wine) }
.header-cta { background: var(--ink); color: white; padding: 15px 20px; font-size: 14px }
.header-cta span { color: #d9cbd4; margin-left: 14px }

/* ==========================================================================
   3. Startseite
   ========================================================================== */

.hero { min-height: 710px; display: grid; grid-template-columns: 56% 44%; position: relative; overflow: hidden }
.hero-copy { padding: 10vh 5vw 8vh 8vw; display: flex; flex-direction: column; justify-content: center }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 12px; color: var(--wine); margin: 0 0 24px }
.hero h1, .section-intro h2, .profile h2, .site-footer h2 { font-family: Georgia, serif; font-weight: 400; line-height: .95; letter-spacing: -.045em }
.hero h1 { font-size: clamp(58px, 7vw, 108px); margin: 0 }
.hero h1 em { color: var(--wine); font-style: italic }
.lead { font-size: 19px; line-height: 1.6; max-width: 600px; margin: 36px 0; color: #454149 }
.actions { display: flex; align-items: center; gap: 28px }
.primary { background: var(--wine); color: white; padding: 18px 22px }
.primary span { color: #dfd3da; padding-left: 22px }
.text-link { font-weight: 700; border-bottom: 1px solid var(--ink); padding: 10px 0 }

.hero-image {
  background-image: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .7)), url('assets/hero-start.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  position: relative;
}
.image-note { position: absolute; bottom: 40px; left: 36px; color: white; display: flex; align-items: end; gap: 12px }
.image-note strong { font-family: Georgia, serif; font-size: 58px; font-weight: 400 }
.image-note span { max-width: 70px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px }

.trustbar { background: var(--ink); color: white; display: grid; grid-template-columns: repeat(3, 1fr); padding: 24px 7vw }
.trustbar p { margin: 0; padding-left: 25px; position: relative; font-size: 14px }
.trustbar p:before { content: '\25C6'; position: absolute; left: 0; color: #c8bdc4; font-size: 10px }

.services { padding: 110px 7vw }
.section-intro { display: flex; justify-content: space-between; align-items: start; margin-bottom: 55px }
.section-intro h2 { font-size: clamp(44px, 5vw, 70px); margin: 0; max-width: 760px }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.service-card { padding: 32px 26px 36px; min-height: 310px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; transition: .25s }
.service-card:hover { background: var(--wine); color: white; transform: translateY(-6px) }
.service-card > span, .service-card .card-number { font-size: 12px; color: #817b7e }
.service-card h3 { font-family: Georgia, serif; font-size: 31px; margin: 60px 0 14px }
.service-card p { line-height: 1.55; color: #5f5960 }
.service-card:hover p, .service-card:hover .card-number { color: #eee }
.service-card b, .service-card .card-link { margin-top: auto; font-size: 13px; font-weight: 700 }

.profile { background: #ddd7cf; display: grid; grid-template-columns: 1fr 1fr; padding: 100px 8vw; gap: 10vw; border-top: 1px solid var(--stone) }
.profile h2 { font-size: clamp(48px, 5.5vw, 78px); margin: 0 }
.profile > div:last-child { font-family: Georgia, serif; font-size: 25px; line-height: 1.45; align-self: end }
.profile a { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; border-bottom: 1px solid; padding-bottom: 7px }

/* ==========================================================================
   4. Fussbereich
   ========================================================================== */

.site-footer { background: var(--wine); color: #fff; text-align: center; padding: 90px 7vw 40px; border-top: 0 }
.footer-logo { display: block; width: 142px; height: auto; margin: 0 auto; background: transparent; padding: 0; opacity: 1 }
.footer-logo img { background: #fff; padding: 10px }
.site-footer h2 { font-size: clamp(48px, 6vw, 86px); margin: 55px 0 30px }
.site-footer .footer-cta { display: inline-block; background: #fff; color: var(--wine); padding: 18px 24px; font-weight: bold }
.site-footer p { margin: 70px 0 0; font-size: 12px; color: #fff; opacity: .75 }

/* ==========================================================================
   5. Detailseiten
   ========================================================================== */

.detail-hero { min-height: 680px; display: grid; grid-template-columns: 52% 48% }
.detail-copy { padding: 10vh 8vw; display: flex; flex-direction: column; justify-content: center }
.detail-copy h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(58px, 6vw, 92px); line-height: .98; letter-spacing: -.045em; margin: 0 }
.detail-copy > p:not(.eyebrow) { font-size: 19px; line-height: 1.6; max-width: 590px; margin: 35px 0 }
.detail-copy .primary { align-self: flex-start }
.detail-photo {
  background-image: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .7)), url('assets/hero-start.jpg');
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  position: relative;
}
.detail-photo.photo-azav { background-image: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .7)), url('assets/azav-pose-v2.jpg'); background-position: 74% center }
.detail-photo.photo-azav-whiteboard { background-image: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .7)), url('assets/azav-whiteboard.jpg'); background-position: 66% center }
.detail-photo.photo-iso { background-image: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .7)), url('assets/iso-9001-hero.jpg'); background-position: 68% center }
.detail-photo.photo-scc { background-image: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .7)), url('assets/scc-hero.jpg'); background-position: 73% center }
.detail-photo.photo-personen { background-image: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, .7)), url('assets/personenzertifizierung-hero.jpg'); background-position: 64% center }

.context-tag { position: absolute; left: 34px; bottom: 34px; color: #fff; display: flex; align-items: center; gap: 15px }
.context-tag b { font-family: Georgia, serif; font-size: 50px }
.context-tag span { max-width: 100px; text-transform: uppercase; letter-spacing: .09em; font-size: 12px }

.audit-card { position: absolute; left: 28px; top: 32px; width: 220px; background: rgba(251, 250, 247, .94); padding: 22px; color: var(--ink); box-shadow: 0 18px 45px rgba(0, 0, 0, .18) }
.audit-card small { display: block; color: var(--wine); font-size: 10px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 22px }
.audit-card > b { display: block; font-family: Georgia, serif; font-size: 27px; font-weight: 400; margin-bottom: 15px }
.audit-card p { font-size: 12px; margin: 10px 0 }
.audit-card p span { color: var(--wine); margin-right: 8px }

.detail-principles { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--wine); color: #fff; padding: 24px 8vw }
.detail-principles p { margin: 0 }

.detail-content { padding: 100px 8vw; display: grid; grid-template-columns: 1fr 1.5fr; gap: 30px }
.detail-content h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(45px, 5vw, 72px); line-height: 1; margin: 0 }
.detail-content > p:not(.eyebrow) { font-size: 18px; line-height: 1.6; max-width: 520px }
.detail-content > a { grid-column: 2; font-weight: bold; margin-top: 20px }

/* ==========================================================================
   6. AZAV-Bereiche
   ========================================================================== */

.azav-paths, .azav-detail, .download-section { padding: 110px 8vw; background: var(--white) }
.azav-path-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line) }
.azav-path-grid > a, .azav-path-grid > .service-card { min-height: 310px; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; transition: .2s }
.azav-path-grid > a:hover, .azav-path-grid > .service-card:hover { background: var(--wine); color: #fff; transform: translateY(-5px) }
.azav-path-grid h3 { font-family: Georgia, serif; font-size: 32px; font-weight: 400; margin: 60px 0 10px }
.azav-path-grid p { line-height: 1.55; color: #625c61 }
.azav-path-grid > a:hover p, .azav-path-grid > .service-card:hover p { color: #eee }
.azav-path-grid b, .azav-path-grid .card-link { margin-top: auto; font-size: 13px; font-weight: 700 }

.azav-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw }
.azav-detail h2, .download-section h2 { font-family: Georgia, serif; font-size: clamp(45px, 5vw, 72px); font-weight: 400; line-height: 1; margin: 0 }
.azav-lead { font-size: 18px; line-height: 1.65; margin-top: 35px }
.azav-facts .azav-note { background: #ddd7cf; padding: 25px; margin-top: 30px; line-height: 1.5 }

.download-section { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8vw }
.download-list { border-top: 1px solid var(--line) }

/* ==========================================================================
   7. Zertifikatsliste
   ========================================================================== */

.certificate-section { padding: 110px 8vw; background: var(--white) }
.certificate-heading { display: grid; grid-template-columns: .7fr 1.5fr 1fr; gap: 35px; align-items: end; margin-bottom: 60px }
.certificate-heading h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(45px, 5vw, 72px); line-height: 1; margin: 0 }
.certificate-heading > p:last-child { line-height: 1.6; color: #5f5960 }
.certificate-list { border-top: 1px solid var(--line) }
.certificate-row { display: grid; grid-template-columns: 60px 150px 1fr auto; gap: 20px; align-items: center; padding: 27px 10px; border-bottom: 1px solid var(--line); transition: .2s }
.certificate-row:hover { background: var(--wine); color: white; padding-left: 24px }
.cert-tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--wine) }
.certificate-row:hover .cert-tag { color: #eadfe6 }
.cert-main { display: flex; align-items: center; gap: 35px }

/* ==========================================================================
   8. Mobile Darstellung
   ========================================================================== */

@media (max-width: 800px) {
  .site-header { height: 76px }
  .site-header nav:not(.wp-block-navigation) { display: none }
  .site-header .wp-block-navigation { margin: 0 0 0 auto }
  .site-header .wp-block-navigation .wp-block-navigation__container { gap: 20px }
  .header-actions { margin-left: 14px }
  .wp-block-button.header-cta .wp-block-button__link.wp-element-button { padding: 12px 14px; font-size: 13px }
  .hero { display: block; min-height: 0 }
  .hero-copy { padding: 70px 7vw }
  .hero h1 { font-size: 54px }
  .lead { font-size: 17px }
  .actions { align-items: flex-start; flex-direction: column }
  .hero-image { height: 430px }
  .trustbar { grid-template-columns: 1fr; gap: 18px }
  .section-intro { display: block }
  .section-intro h2 { font-size: 43px }
  .service-grid { grid-template-columns: 1fr }
  .service-card { min-height: 230px }
  .service-card h3 { margin-top: 35px }
  .profile { grid-template-columns: 1fr; padding: 75px 7vw }
  .profile h2 { font-size: 49px }
  .profile > div:last-child { font-size: 21px }
  .site-footer h2 { font-size: 48px }

  .detail-hero { grid-template-columns: 1fr }
  .detail-copy { padding: 70px 7vw }
  .detail-copy h1 { font-size: 52px }
  .detail-photo { height: 440px }
  .detail-principles { grid-template-columns: 1fr; gap: 15px }
  .detail-content { grid-template-columns: 1fr; padding: 70px 7vw }
  .detail-content > a { grid-column: 1 }

  .audit-card { left: 18px; top: 20px; width: 190px; padding: 17px }
  .audit-card small { margin-bottom: 13px }
  .audit-card > b { font-size: 23px }

  .azav-paths, .azav-detail, .download-section { padding: 75px 7vw }
  .azav-path-grid { grid-template-columns: 1fr }
  .azav-path-grid > a, .azav-path-grid > .service-card { min-height: 240px }
  .azav-detail, .download-section { grid-template-columns: 1fr }
  .download-section { gap: 45px }

  .certificate-section { padding: 75px 7vw }
  .certificate-heading { grid-template-columns: 1fr }
  .certificate-row { grid-template-columns: 36px 1fr }
  .cert-tag { display: none }
  .cert-main { display: block }
  .cert-main b { display: block; min-width: 0; margin-bottom: 8px }
  .certificate-row:hover { padding-left: 10px }
  .booking-button { grid-column: 2; justify-self: start; margin-top: 8px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .service-card, .azav-path-grid > a, .azav-path-grid > .service-card, .certificate-row { transition: none }
}

/* ==========================================================================
   9. Anpassungen fuer WordPress
   WordPress legt eigene Container um die Bausteine. Die folgenden Regeln
   gleichen das aus, damit die Darstellung dem Entwurf entspricht. Am Design
   selbst aendert sich dadurch nichts.
   ========================================================================== */

/* --- 9.1 Grundlegende Wrapper ------------------------------------------- */

.wp-site-blocks > *,
.wp-block-group { margin: 0 }
.wp-block-image { margin: 0 }
.wp-block-image img { display: block }
.wp-block-post-content > * { margin: 0 }

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

.site-header .wp-block-site-logo { line-height: 0 }
.brand img { display: block; width: 106px; height: 68px; object-fit: contain }

.site-header .wp-block-navigation { margin: auto; font-size: 14px }
.site-header .wp-block-navigation .wp-block-navigation__container { gap: 34px }
.site-header .wp-block-navigation .wp-block-navigation-item__content { color: inherit }
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wine) }
.header-actions { margin-left: auto }

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

.wp-block-buttons { display: flex; flex-wrap: wrap; margin: 0 }
.wp-block-button__link.wp-element-button { border-radius: 0; text-decoration: none }

/* Die Gestaltung gehoert an den Link, nicht an den Container, den WordPress darum legt. */
.wp-block-button.primary, .wp-block-button.text-link,
.wp-block-button.header-cta, .wp-block-button.footer-cta {
  background: transparent; padding: 0; border: 0;
}

.wp-block-button.primary .wp-block-button__link.wp-element-button {
  background: var(--wine); color: #fff; padding: 18px 22px; font-size: 16px; font-weight: 400;
}
.wp-block-button.text-link .wp-block-button__link.wp-element-button {
  background: transparent; color: var(--ink); font-weight: 700; padding: 10px 0;
  border-bottom: 1px solid var(--ink);
}
.wp-block-button.header-cta .wp-block-button__link.wp-element-button {
  background: var(--ink); color: #fff; padding: 15px 20px; font-size: 14px;
}
.wp-block-button.footer-cta .wp-block-button__link.wp-element-button {
  background: #fff; color: var(--wine); padding: 18px 24px; font-weight: bold;
}

.actions { align-items: center; gap: 28px }
.footer-actions { justify-content: center }

/* --- 9.4 Startseite: Bildkopf ------------------------------------------- */

.hero-image { min-height: 100% }
.image-note p { margin: 0 }
.image-note .note-figure { font-family: Georgia, serif; font-size: 58px; line-height: 1 }
.image-note .note-label { max-width: 70px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px }

/* --- 9.5 Karten mit automatischer Nummerierung --------------------------- */

.service-grid, .azav-path-grid { counter-reset: cardnum }
.service-card { position: relative; counter-increment: cardnum }
.service-card::before {
  content: counter(cardnum, decimal-leading-zero);
  font-size: 12px; color: #817b7e; display: block;
}
.service-card:hover::before { color: #eee }
.service-card p { margin: 0 }
.service-card .card-link { margin-top: auto; font-size: 13px; font-weight: 700 }
.service-card .card-link a { display: inline-block }
.service-card .card-link a::after { content: ''; position: absolute; inset: 0 }

/* --- 9.6 Faktenliste ----------------------------------------------------- */

.azav-facts { counter-reset: factnum }
.azav-facts > p:not(.azav-note) {
  counter-increment: factnum;
  display: grid; grid-template-columns: 46px 1fr;
  padding: 20px 0; border-bottom: 1px solid var(--line); margin: 0; line-height: 1.4;
}
.azav-facts > p:not(.azav-note)::before {
  content: counter(factnum, decimal-leading-zero);
  font-family: Georgia, serif; color: var(--wine);
}

/* --- 9.7 Downloadliste --------------------------------------------------- */

.download-list ul { list-style: none; margin: 0; padding: 0; counter-reset: dlnum }
.download-list li {
  counter-increment: dlnum;
  display: grid; grid-template-columns: 45px 1fr auto; gap: 15px;
  padding: 24px 5px; border-bottom: 1px solid var(--line); align-items: center;
}
.download-list li::before {
  content: counter(dlnum, decimal-leading-zero);
  font-family: Georgia, serif; color: #8d8588;
}
.download-list li::after { content: 'Download \2193'; font-size: 12px; font-weight: bold }
.download-list li a { font-weight: bold }
.download-list li:hover { color: var(--wine) }

/* --- 9.8 Zertifikatsliste ------------------------------------------------ */

.certificate-list { counter-reset: certnum }
.certificate-row { counter-increment: certnum }
.certificate-row::before {
  content: counter(certnum, decimal-leading-zero);
  font-family: Georgia, serif; color: #8d8588;
}
.certificate-row:hover::before { color: #eadfe6 }
.certificate-row p { margin: 0 }
.cert-main .cert-title { font-family: Georgia, serif; font-size: 25px; font-weight: 400; min-width: 240px }
.cert-main .cert-text { font-size: 14px; line-height: 1.45; max-width: 570px; color: #676067 }
.certificate-row:hover .cert-main .cert-text { color: #eee }
.booking-button {
  background: var(--wine); color: #fff; padding: 13px 16px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.certificate-row:hover .booking-button { background: #fff; color: var(--wine) }
.booking-button a { display: block }

/* --- 9.9 Detailseiten ---------------------------------------------------- */

.detail-photo { min-height: 100% }
.context-tag p { margin: 0 }
.context-tag .tag-figure { font-family: Georgia, serif; font-size: 50px; line-height: 1 }
.context-tag .tag-label { max-width: 100px; text-transform: uppercase; letter-spacing: .09em; font-size: 12px }
.detail-content > .back-link { grid-column: 2; font-weight: bold; margin-top: 20px }
.detail-principles p { margin: 0 }
.trustbar p { margin: 0 }
.profile p { margin: 0 0 20px }
.profile > div:last-child p:last-child { margin: 0 }

/* --- 9.10 Fussbereich ---------------------------------------------------- */

.footer-logo img { display: block; width: 142px; height: auto; margin: 0 auto }
.site-footer .footer-legal { margin-top: 14px; font-size: 12px; opacity: .75 }
.site-footer .footer-legal a { text-decoration: underline }

/* --- 9.11 Schlichte Seiten (Beitraege, Suche, Fehlerseite) --------------- */

.simple-page { padding: 90px 8vw 120px; max-width: 900px }
.simple-page h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; margin: 0 0 30px }
.simple-page h2 { font-family: Georgia, serif; font-weight: 400; font-size: 32px; margin: 45px 0 12px }
.simple-page p { font-size: 17px; line-height: 1.65 }
.simple-page a { border-bottom: 1px solid var(--line) }
.simple-page .wp-block-buttons a { border-bottom: 0 }

/* --- 9.12 Bedienbarkeit -------------------------------------------------- */

a:focus-visible, button:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px }
.site-footer a:focus-visible, .trustbar a:focus-visible,
.detail-principles a:focus-visible, .service-card:hover a:focus-visible { outline-color: #fff }

/* --- 9.13 Editoransicht -------------------------------------------------- */

.editor-styles-wrapper .hero,
.editor-styles-wrapper .detail-hero { min-height: 520px }
.editor-styles-wrapper .hero-image,
.editor-styles-wrapper .detail-photo { min-height: 420px }