/*
Theme Name: Gerl Craft
Theme URI: https://www.gerl-craft.de/
Author: Manuel Gerl
Author URI: https://www.gerl-craft.de/
Description: Eigenes dunkles WordPress-Block-Theme für Gerl-Craft: DIY, 3D-Druck, Smart Home, Elektronik und Server.
Version: 0.1.15
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: gerl-craft
*/

:root {
  --gc-bg: #071116;
  --gc-bg-soft: #0b1a21;
  --gc-surface: #10242d;
  --gc-surface-2: #152f3a;
  --gc-text: #f4f7f8;
  --gc-muted: #a8bac2;
  --gc-line: rgba(255,255,255,.11);
  --gc-accent: #20a9e0;
  --gc-accent-2: #FFA43C;
  --gc-header-gold: #FFA43C;
  --gc-header-bg: #03070A;
  --gc-shadow: 0 24px 70px rgba(0,0,0,.34);
  --gc-radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(32,169,224,.10), transparent 28rem),
    linear-gradient(180deg, #071116 0%, #09161c 55%, #071116 100%);
}
body, button, input, textarea, select { -webkit-font-smoothing: antialiased; }
a { transition: color .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease; }
img { max-width: 100%; height: auto; }

.gc-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
  border-bottom: 0;
  background:
    radial-gradient(circle at 50% -120%, rgba(255,164,60,.055), transparent 42%),
    linear-gradient(180deg, rgba(3,7,10,.98), rgba(3,7,10,.92));
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.02);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.gc-site-header::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,164,60,.08) 18%, rgba(255,190,91,.30) 50%, rgba(255,164,60,.08) 82%, transparent 100%);
  box-shadow: none;
  pointer-events: none;
}
.gc-header-inner { min-height: 88px; }
.gc-main-nav {
  position: relative;
  padding: 6px 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.gc-main-nav .wp-block-navigation__container { gap: 10px; }
.gc-main-nav .wp-block-navigation-item { position: relative; }
.gc-main-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
  content: '◆';
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%) scale(.55);
  color: rgba(255,164,60,.24);
  font-size: .46rem;
  pointer-events: none;
}
.gc-main-nav .wp-block-navigation-item__content {
  position: relative;
  z-index: 1;
  padding: .82rem 1.18rem !important;
  border-radius: 999px;
  color: var(--gc-header-gold) !important;
  font-size: .93rem;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none !important;
  text-shadow: none;
  transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.gc-main-nav .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffd18a, transparent);
  box-shadow: 0 0 4px rgba(255,164,60,.25);
  transition: left .22s ease, right .22s ease;
}
.gc-main-nav .wp-block-navigation-item__content:hover {
  color: #fff4e4 !important;
  background: rgba(255,164,60,.045);
  box-shadow: none;
  transform: translateY(-1px);
  text-shadow: 0 0 7px rgba(255,164,60,.16);
}
.gc-main-nav .wp-block-navigation-item__content:hover::after,
.gc-main-nav .current-menu-item > .wp-block-navigation-item__content::after {
  left: 25%;
  right: 25%;
}
.gc-main-nav .current-menu-item > .wp-block-navigation-item__content {
  color: #1a0d02 !important;
  background: linear-gradient(180deg, #ffc36d 0%, #FFA43C 58%, #e4861f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 0 8px rgba(255,164,60,.08),
    0 6px 16px rgba(0,0,0,.24);
  text-shadow: 0 1px 0 rgba(255,255,255,.16);
}
.gc-main-nav .current-menu-item > .wp-block-navigation-item__content::after { display: none; }
.gc-site-header .wp-block-navigation__responsive-container-open,
.gc-site-header .wp-block-navigation__responsive-container-close {
  color: var(--gc-header-gold) !important;
  border: 1px solid rgba(255,164,60,.18);
  border-radius: 10px;
  padding: 9px;
  background: rgba(255,164,60,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.gc-site-header .wp-block-navigation__responsive-container-open svg,
.gc-site-header .wp-block-navigation__responsive-container-close svg { fill: currentColor; }
/* WooCommerce-Haken im Header vorerst ausblenden, solange kein Shop aktiv ist. */
.gc-site-header .wp-block-woocommerce-customer-account,
.gc-site-header .wp-block-woocommerce-mini-cart { display: none !important; }

.gc-hero {
  min-height: clamp(250px, 22vw, 340px) !important;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--gc-line);
  overflow: hidden;
  background: #03070A !important;
}
.gc-hero .wp-block-cover__background {
  background: linear-gradient(90deg, rgba(3,9,12,.62) 0%, rgba(3,9,12,.38) 42%, rgba(3,9,12,.08) 100%) !important;
  opacity: 1 !important;
}
.gc-hero .wp-block-cover__inner-container { width: 100%; }
.gc-hero .wp-block-cover__image-background {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: right center !important;
  transform: none !important;
}
.gc-hero-content {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1220px);
  margin-inline: auto;
  padding: clamp(28px, 3vw, 46px) clamp(20px, 3vw, 32px) !important;
}
.gc-hero-lockup {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  max-width: 760px;
}
.gc-hero-logo {
  margin: 0 !important;
  flex: 0 0 auto;
}
.gc-hero-logo img {
  width: clamp(200px, 18vw, 300px) !important;
  height: auto !important;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.42));
}
.gc-hero-text {
  min-width: 0;
}
.gc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--gc-header-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.72rem, .82vw, .88rem);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.gc-kicker::before,
.gc-kicker::after {
  content: '';
  width: clamp(34px, 4vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: .9;
}
.gc-hero-title {
  max-width: none;
  margin: 0;
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 3.7vw, 3.85rem) !important;
  font-weight: 500;
  line-height: 1.02 !important;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.gc-intro-strip {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4vw, 48px) clamp(20px, 3vw, 32px) !important;
  border-bottom: 1px solid rgba(255,255,255,.085);
  background:
    radial-gradient(circle at 18% -70%, rgba(32,169,224,.13), transparent 25rem),
    radial-gradient(circle at 82% 160%, rgba(255,164,60,.065), transparent 23rem),
    linear-gradient(180deg, #071116 0%, #09161c 100%);
}
.gc-intro-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(920px, 68vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,164,60,.34), transparent);
  pointer-events: none;
}
.gc-intro-inner {
  gap: clamp(34px, 4vw, 68px) !important;
  align-items: center;
}
.gc-intro-label {
  margin: 0 0 9px;
  color: var(--gc-header-gold);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1.2;
  text-transform: uppercase;
}
.gc-intro-copy {
  max-width: 720px;
  margin: 0;
  color: #d8e2e6;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.68;
}
.gc-intro-buttons-column {
  position: relative;
  padding-left: clamp(34px, 4vw, 58px);
}
.gc-intro-buttons-column::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 58px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,164,60,.34), transparent);
}
.gc-intro-actions {
  justify-content: flex-end;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin: 0 !important;
}
.gc-intro-actions .wp-block-button { flex: 0 0 auto; }
.gc-intro-actions .wp-block-button__link {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .84rem 1.22rem;
  white-space: nowrap;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #ffb657 0%, #FFA43C 62%, #e58b25 100%);
  color: #1b0d02;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.gc-intro-actions .wp-block-button__link:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffc170 0%, #ffad4d 62%, #ef9631 100%);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.gc-intro-actions .is-style-outline .wp-block-button__link {
  border-color: rgba(255,164,60,.52);
  background: rgba(255,164,60,.025);
  color: #ffd39a;
  box-shadow: none;
}
.gc-intro-actions .is-style-outline .wp-block-button__link:hover {
  border-color: rgba(255,190,105,.78);
  background: rgba(255,164,60,.07);
  color: #fff2df;
  box-shadow: none;
}
.wp-block-button__link { box-shadow: 0 10px 32px rgba(32,169,224,.18); }
.wp-block-button.is-style-outline .wp-block-button__link { box-shadow: none; }

.gc-section { position: relative; padding-top: clamp(56px, 5vw, 80px) !important; padding-bottom: clamp(56px, 5vw, 80px) !important; }
.gc-section + .gc-section { border-top: 1px solid var(--gc-line); }
/* Alle Hauptbereiche folgen demselben ruhigen Seitenraster wie Header, Hero und Intro. */
.gc-section .alignwide {
  width: min(100%, 1220px) !important;
  max-width: 1220px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#themen { padding-top: clamp(42px, 4vw, 62px) !important; }
.gc-section-heading { max-width: 900px !important; margin-bottom: 32px !important; }
.gc-eyebrow { color: var(--gc-accent); font-size: .76rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.gc-section-title { margin-top: 10px !important; margin-bottom: 14px !important; font-size: clamp(1.9rem, 4vw, 3.4rem) !important; letter-spacing: -.04em; line-height: 1.06 !important; }
.gc-section-lead { color: var(--gc-muted); font-size: 1.08rem; line-height: 1.75; }

.gc-topic-grid {
  gap: clamp(18px, 1.7vw, 24px) !important;
  align-items: stretch;
}
.gc-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 286px;
  padding: 32px 32px 30px !important;
  border: 1px solid rgba(255,255,255,.105);
  border-radius: var(--gc-radius);
  background:
    linear-gradient(180deg, rgba(255,164,60,.035), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(32,169,224,.13), transparent 17rem),
    linear-gradient(160deg, #16333f 0%, #102630 54%, #0d2028 100%);
  box-shadow: 0 20px 48px rgba(0,0,0,.25);
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.gc-topic-card::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,164,60,.92), transparent);
  opacity: .58;
  transition: opacity .28s ease, left .28s ease, right .28s ease;
}
.gc-topic-card::after {
  content: '↗';
  position: absolute;
  right: 26px;
  bottom: 22px;
  color: rgba(255,164,60,.72);
  font-size: 1.38rem;
  line-height: 1;
  transform: translate(0, 0);
  transition: color .28s ease, transform .28s ease;
}
.gc-topic-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,164,60,.28);
  box-shadow: 0 22px 52px rgba(0,0,0,.31), 0 0 0 1px rgba(255,164,60,.03);
}
.gc-topic-card:hover::before { left: 18px; right: 18px; opacity: 1; }
.gc-topic-card:hover::after { color: #ffc46f; transform: translate(3px, -3px); }
.gc-topic-number {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  color: #ffc16a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.gc-topic-card h3 {
  position: relative;
  z-index: 1;
  margin-top: 42px !important;
  margin-bottom: 12px !important;
  font-size: clamp(1.18rem, 1.5vw, 1.42rem);
}
.gc-topic-card > p:not(.gc-topic-number) {
  position: relative;
  z-index: 1;
  max-width: 92%;
  margin-bottom: 26px !important;
  color: var(--gc-muted);
  line-height: 1.65;
}
.gc-topic-card a { color: var(--gc-text); text-decoration: none; }
.gc-topic-card h3 a:hover { color: #ffd49a; }
.gc-topic-link {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  color: rgba(255,205,140,.82) !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.gc-topic-link:hover { color: #fff0dc !important; }

.gc-post-grid { gap: 24px !important; }
.gc-post-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius);
  background: linear-gradient(180deg, var(--gc-surface-2), var(--gc-surface));
  box-shadow: var(--gc-shadow);
}
.gc-post-card:hover { transform: translateY(-5px); border-color: rgba(32,169,224,.4); }
.gc-post-card .wp-block-post-featured-image { aspect-ratio: 16 / 10; overflow: hidden; }
.gc-post-card .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.gc-post-card:hover .wp-block-post-featured-image img { transform: scale(1.045); }
.gc-post-card-content { padding: 26px !important; }
.gc-post-card .wp-block-post-terms { color: var(--gc-accent); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.gc-post-card .wp-block-post-title { margin-top: 12px !important; margin-bottom: 14px !important; font-size: 1.45rem; line-height: 1.18; }
.gc-post-card .wp-block-post-title a { text-decoration: none; }
.gc-post-card .wp-block-post-excerpt { color: var(--gc-muted); }
.gc-post-card .wp-block-post-date { color: #82969f; font-size: .82rem; }

.gc-feature-panel {
  padding: clamp(30px, 5vw, 68px) !important;
  border: 1px solid var(--gc-line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 80% 20%, rgba(240,164,50,.16), transparent 24rem),
    linear-gradient(145deg, #122b35, #0b1a21);
  box-shadow: var(--gc-shadow);
}
.gc-feature-panel p { color: #c6d4da; }

.gc-content-shell { padding-top: clamp(48px, 7vw, 96px) !important; padding-bottom: clamp(70px, 8vw, 120px) !important; }
.gc-page-header { margin-bottom: 46px !important; }
.gc-page-title { font-size: clamp(2.5rem, 6vw, 5.6rem) !important; letter-spacing: -.05em; line-height: 1 !important; }
.gc-post-meta { color: var(--gc-muted); font-size: .9rem; }
.gc-single-featured { margin-top: 34px !important; margin-bottom: 50px !important; overflow: hidden; border-radius: 22px; border: 1px solid var(--gc-line); box-shadow: var(--gc-shadow); }
.gc-single-featured img { width: 100%; max-height: 680px; object-fit: cover; }
.gc-entry-content { font-size: 1.08rem; line-height: 1.82; }
.gc-entry-content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.gc-entry-content > .alignwide { max-width: 1180px; }
.gc-entry-content > .alignfull { max-width: none; }
.gc-entry-content h2 { margin-top: 2.5em; font-size: clamp(1.75rem, 3vw, 2.65rem); letter-spacing: -.025em; }
.gc-entry-content h3 { margin-top: 2em; }
.gc-entry-content p, .gc-entry-content li { color: #d0dce0; }
.gc-entry-content pre, .gc-entry-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gc-entry-content pre { overflow-x: auto; padding: 22px; border: 1px solid var(--gc-line); border-radius: 14px; background: #041015; }
.gc-entry-content blockquote { padding-left: 22px; border-left: 3px solid var(--gc-accent); color: var(--gc-muted); }

.gc-pagination { margin-top: 48px !important; }
.gc-pagination a, .gc-pagination .current { display: inline-flex; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; border: 1px solid var(--gc-line); border-radius: 10px; text-decoration: none; }
.gc-pagination a:hover, .gc-pagination .current { background: var(--gc-accent); color: #031016; border-color: var(--gc-accent); }

.gc-site-footer { padding-top: 70px !important; padding-bottom: 34px !important; border-top: 1px solid var(--gc-line); background: #050d11; }
.gc-footer-logo img { width: 190px !important; height: auto !important; }
.gc-footer-text { max-width: 600px; color: var(--gc-muted); }
.gc-footer-links a { color: var(--gc-muted); text-decoration: none; }
.gc-footer-links a:hover { color: var(--gc-accent); }
.gc-footer-bottom { margin-top: 50px !important; padding-top: 24px !important; border-top: 1px solid var(--gc-line); color: #71868f; font-size: .8rem; }

@media (max-width: 1280px) {
  .gc-section .alignwide { width: min(100%, calc(100vw - 48px)) !important; }
}

@media (max-width: 900px) {
  .gc-main-nav { padding: 0 !important; border: 0; background: transparent; box-shadow: none; }
  .gc-main-nav .wp-block-navigation-item + .wp-block-navigation-item::before { display: none; }
  .gc-header-inner { min-height: 76px; }
  .gc-hero-lockup { gap: 18px; max-width: 620px; }
  .gc-hero-logo img { width: 118px !important; }
  .gc-hero { min-height: clamp(410px, 62vh, 500px) !important; }
  .gc-hero .wp-block-cover__background { background: rgba(3,9,12,.78) !important; }
  .gc-intro-inner { gap: 24px !important; }
  .gc-intro-buttons-column { padding-left: 0; }
  .gc-intro-buttons-column::before { display: none; }
  .gc-intro-actions { justify-content: flex-start; flex-wrap: wrap !important; }
  .gc-topic-grid, .gc-post-grid { grid-template-columns: 1fr !important; }
  .gc-topic-card { min-height: 240px; }
  .gc-section .alignwide { width: min(100%, calc(100vw - 36px)) !important; }
}

@media (max-width: 600px) {
  .gc-hero-lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .gc-hero-logo img {
    width: 88px !important;
  }
  .gc-site-header .wp-block-navigation__responsive-container.is-menu-open {
    padding: 28px;
    background:
      radial-gradient(circle at 80% 0%, rgba(255,164,60,.12), transparent 19rem),
      #03070A;
  }
  .gc-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    width: 100%;
    padding: 1rem 1.05rem !important;
    border-bottom: 1px solid rgba(255,164,60,.10);
    border-radius: 0;
    font-size: .98rem;
  }
  .gc-hero-title { font-size: clamp(2.25rem, 11vw, 3.45rem) !important; line-height: 1.04 !important; }
  .gc-intro-actions { align-items: stretch !important; flex-wrap: wrap !important; }
  .gc-intro-actions .wp-block-button,
  .gc-intro-actions .wp-block-button__link { width: 100%; text-align: center; }
  .gc-button-row { align-items: stretch !important; }
  .gc-button-row .wp-block-button, .gc-button-row .wp-block-button__link { width: 100%; text-align: center; }
  .gc-feature-panel { border-radius: 18px; }
}