/*
Theme Name: Tarantino BauKeramik
Description: WordPress-Block-Theme für Tarantino BauKeramik.
Version: 1.4.8
Requires at least: 6.5
Text Domain: tarantino-baukeramik
*/
:root{--ink:#111b40;--paper:#f4f7fc;--navy:#06134e;--ice:#a8e4f5}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif}
.bk-wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,72px)}
.bk-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:22px}
.bk-nav p{margin:0}.bk-nav a,.bk-footer a{text-decoration:none;color:inherit}.bk-nav a:hover,.bk-footer a:hover{text-decoration:underline}.bk-brand{font-weight:800;letter-spacing:-.03em}.bk-links{font-size:.9rem}
.bk-hero{background:var(--navy);color:#fff;padding-block:clamp(38px,5.3vw,80px);position:relative;isolation:isolate;overflow:hidden}
.bk-hero::after {
  content: "";
  position: absolute;
  inset: -35% -20% -35% 35%;
  z-index: -2;
  opacity: .9;
  background:
    linear-gradient(90deg, #071440 0 3px, #8ec6ee69 3px 5px, transparent 5px 95px, #030b2b99 95px),
    linear-gradient(0deg, #030b2b 0 3px, #050d35 3px 5px, transparent 5px 95px, #a7dafa69 95px),
    linear-gradient(145deg, #416ba1 0%, #294d88 24%, #19386e 55%, #142b59 100%);
  background-size: 100px 100px;
  transform: rotate(-16deg);
  mask-image: linear-gradient(to right, transparent 8%, #000 70%);
}
.bk-tag{font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.bk-hero .bk-tag{color:var(--ice)}
.bk-hero h1{font-size:clamp(2.7rem,7vw,6.2rem);max-width:17ch;font-weight:750;line-height:.98;letter-spacing:-.065em;margin-block:.24em}
.bk-lead{max-width:44ch;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.6}
.bk-button .wp-block-button__link{background:var(--ice);color:var(--ink);border-radius:4px;font-weight:700;padding:14px 20px}
.bk-button .wp-block-button__link:hover{background:#fff}
a:focus-visible{outline:3px solid #bf742e;outline-offset:4px}
.bk-section{padding-block:clamp(48px,8vw,96px)}
.bk-section h2{font-size:clamp(2rem,5vw,3.8rem);letter-spacing:-.055em;line-height:1.05;margin-block:.3em .65em}
.bk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:2rem}
.bk-card{background:#fff;border-top:3px solid #317dad;padding:clamp(18px,3vw,32px)}
.bk-card h3{font-size:1.35rem;margin-top:0}.bk-card p,.bk-section p{line-height:1.65}
.bk-about{background:#e7eef8}
.bk-contact{background:var(--ice)}
.bk-contact a{color:var(--ink)}
.bk-footer{background:var(--navy);color:#fff;padding-block:24px}.bk-footer p{margin:0}
@media(max-width:700px){.bk-grid{grid-template-columns:1fr}.bk-hero::after{inset-inline-start:40%}}

.bk-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px)}
.bk-logo{margin:0;justify-self:center;width:min(100%,410px)}.bk-logo img{display:block;width:100%;height:auto;border-radius:8px}
@media(max-width:850px){.bk-hero-grid{grid-template-columns:1fr}.bk-logo{justify-self:start;width:min(70%,250px)}}


.bk-nav .bk-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0;
}
.bk-nav .bk-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #c7d7ed;
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 650;
}
.bk-nav .bk-links a:hover, .bk-nav .bk-links a:focus-visible {
  background: var(--ice);
  text-decoration: none;
}
.bk-nav .bk-links a:last-child {
  background: var(--navy);
  color: #fff;
}
.bk-nav .bk-links a:last-child:hover,
.bk-nav .bk-links a:last-child:focus-visible { background: #233c76; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .bk-hero-grid > :first-child { animation: bk-enter 900ms ease-out both; }
  .bk-logo { animation: bk-enter 1050ms 140ms ease-out both; }
  .bk-card, .bk-nav .bk-links a, .bk-button .wp-block-button__link {
    transition: transform 240ms ease, box-shadow 240ms ease, background-color 240ms ease;
  }
  .bk-card:hover { transform: translateY(-5px); box-shadow: 0 14px 32px #06134e19; }
  .bk-nav .bk-links a:hover, .bk-button .wp-block-button__link:hover { transform: translateY(-2px); }
  .bk-reveal { animation: bk-enter 750ms ease-out both; }
}
.bk-nav .bk-brand a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bk-nav .bk-brand a::before {
  content: "";
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: var(--navy) url("assets/tarantino.gif") center / contain no-repeat;
}

.bk-grid > .bk-card { margin-block: 0; }

@media (prefers-reduced-motion: no-preference) {
  .bk-hero-grid > :first-child { animation: bk-enter 1250ms cubic-bezier(.2,.7,.25,1) both; }
  .bk-logo { animation: bk-logo-enter 1500ms 150ms cubic-bezier(.2,.7,.25,1) both; }
  .bk-reveal { animation: bk-enter 1100ms var(--bk-delay, 0ms) cubic-bezier(.2,.7,.25,1) backwards; }
  .bk-grid > .bk-card:nth-child(3n + 2) { --bk-delay: 140ms; }
  .bk-grid > .bk-card:nth-child(3n) { --bk-delay: 280ms; }
}
@keyframes bk-enter {
  from { opacity: .1; transform: translateY(45px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bk-logo-enter {
  from { opacity: 0; transform: translateX(55px) scale(.88); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}


.bk-card.bk-selectable { position: relative; cursor: pointer; }
.bk-card-choice {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
.bk-card-choice::after { content: ""; position: absolute; inset: 0; }
.bk-card:focus-within { outline: 2px solid #317dad; outline-offset: 3px; }
.bk-card.bk-selected {
  background: #e5f4ff;
  border-top-color: var(--navy);
  box-shadow: inset 0 0 0 2px #317dad, 0 12px 25px #06134e24;
}
@media (prefers-reduced-motion: no-preference) {
  .bk-card.bk-selected { transform: translateY(-8px); }
}

.bk-hero h1 {
  max-width: 20ch;
  font-size: clamp(2.05rem, 4.5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}
.bk-hero .bk-lead {
  max-width: 56ch;
  font-size: clamp(.95rem, 1.35vw, 1.1rem);
  text-align: justify;
  hyphens: auto;
}

@media (min-width: 851px) {
  .bk-hero-grid > .bk-logo {
    align-self: start;
    width: min(100%, 310px);
    margin-block-start: clamp(12px, 2vw, 28px);
  }
}

#leistungen { padding-block-start: clamp(38px, 5vw, 68px); }
#leistungen .bk-card h3::before {
  content: "";
  display: block;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 10px;
  color: #235581;
  background: #e7f2fd;
}

#leistungen .bk-card:nth-child(1) h3::before {
  background: conic-gradient(from 90deg, #235581 0 25%, #a9cce9 0 50%, #235581 0 75%, #a9cce9 0) center / 22px 22px no-repeat #e7f2fd;
}
#leistungen .bk-card:nth-child(2) h3::before {
  background:
    radial-gradient(ellipse at 50% 0, #235581 68%, transparent 72%) center 21px / 24px 11px no-repeat,
    linear-gradient(#235581 0 0) 12px 12px / 2px 10px no-repeat,
    linear-gradient(#235581 0 0) 12px 12px / 8px 2px no-repeat #e7f2fd;
}
#leistungen .bk-card:nth-child(3) h3::before {
  background:
    radial-gradient(circle, #e7f2fd 55%, transparent 60%) center 17px / 3px 3px no-repeat,
    linear-gradient(#e7f2fd 0 0) center 23px / 13px 7px no-repeat,
    linear-gradient(#235581 0 0) center / 22px 23px no-repeat #e7f2fd;
}
#leistungen .bk-card:nth-child(4) h3::before {
  background: repeating-linear-gradient(0deg, #235581 0 4px, #e7f2fd 4px 7px) center / 25px 20px no-repeat #e7f2fd;
}
#leistungen .bk-card:nth-child(5) h3::before {
  background:
    radial-gradient(ellipse, #235581 60%, transparent 64%) center 18px / 14px 16px no-repeat,
    conic-gradient(from 153deg at 50% 0, #235581 0 54deg, transparent 54deg) center 9px / 14px 15px no-repeat #e7f2fd;
}
#leistungen .bk-card:nth-child(6) h3::before {
  background:
    linear-gradient(#235581 0 0) 18px 14px / 5px 20px no-repeat,
    linear-gradient(#235581 0 0) center 10px / 24px 7px no-repeat #e7f2fd;
}
@media (prefers-reduced-motion: no-preference) {
  .bk-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 0 38%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, #b8dfff30 49%, transparent 63%) 130% 0 / 260% 100% no-repeat;
    animation: bk-ceramic-sheen 2.6s .35s ease-in-out both;
  }
}
@keyframes bk-ceramic-sheen {
  0% { opacity: 0; background-position: 130% 0; }
  18%, 78% { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}

.bk-hero {
  background: radial-gradient(ellipse at 70% 20%, #173471, var(--navy) 62%);
}
.bk-hero::after {
  opacity: .77;
  mask-image: linear-gradient(to right, transparent 16%, #000 74%);
}
.bk-hero h1 { text-wrap: balance; }
.bk-hero .bk-tag { margin-block-end: 18px; }
.bk-hero .wp-block-button__link {
  border-radius: 8px;
  box-shadow: 0 6px 18px #030b2b50;
}
.bk-hero .wp-block-button__link::after {
  content: " →" / "";
  margin-inline-start: 6px;
}
.bk-grid { gap: clamp(14px, 2vw, 24px); }
#leistungen .bk-card {
  border: 1px solid #d6e1ef;
  border-radius: 14px;
  box-shadow: 0 4px 14px #142b590b;
}
#leistungen .bk-card:hover {
  border-color: #8bb6da;
  box-shadow: 0 12px 28px #142b591c;
}
#leistungen .bk-card.bk-selected {
  border-color: #317dad;
  box-shadow: inset 0 0 0 1px #317dad, 0 12px 25px #06134e24;
}
#leistungen .bk-card h3::before { margin-bottom: 18px; }
.bk-contact { background: linear-gradient(120deg, #d9f2fa, #eaf4ff); }


/* Keep the tiled header distinct from the quiet, lighter content sections. */
.bk-nav { padding-block: 17px; }
.bk-nav .bk-links a { border-radius: 10px; }
.bk-hero-grid > .bk-logo {
  box-sizing: border-box;
  padding: clamp(10px, 1.7vw, 22px);
  border: 1px solid #c1e7ff52;
  border-radius: 24px;
  background: linear-gradient(145deg, #b3dcff26, #07154145);
  box-shadow: 0 18px 50px #02091f60;
}
@media (min-width: 851px) {
  .bk-hero-grid > .bk-logo { width: min(100%, 350px); }
}
#leistungen { padding-block-end: clamp(50px, 7vw, 90px); }
#leistungen .bk-card {
  border-radius: 18px;
  padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(145deg, #fff 64%, #f1f7fe);
}
#leistungen .bk-card.bk-selected {
  background: linear-gradient(145deg, #edf8ff, #d9edff);
}
#leistungen .bk-card h3 { line-height: 1.22; }
#leistungen .bk-card p { color: #36455f; }
#leistungen .bk-card h3::before { width: 46px; height: 46px; border-radius: 12px; }
.bk-about { background: linear-gradient(115deg, #e0edf9, #f3f7fc); }
.bk-about p, #ueber-uns > p { max-width: 75ch; }
#ueber-uns > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}
#ueber-uns > ul li {
  padding: 14px 17px;
  border: 1px solid #d6e1ef;
  border-radius: 12px;
  background: #fff;
}
#ueber-uns > ul li::before {
  content: "✓" / "";
  margin-inline-end: 9px;
  color: #235581;
  font-weight: 750;
}
.bk-contact { border-top: 1px solid #d0e3f4; }
#kontakt > .bk-quote-wrap { margin-block-start: 0; }
#kontakt .bk-quote { border-radius: 22px; }
@media (min-width: 980px) {
  #kontakt:has(> .bk-quote-wrap) {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(54px, 7vw, 90px) max(5vw, calc((100% - 1060px) / 2));
    align-items: start;
  }
  #kontakt:has(> .bk-quote-wrap) > .bk-wrap {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #kontakt:has(> .bk-quote-wrap) h2 { margin-block-start: 0; }
  #kontakt .bk-quote { padding: clamp(24px, 3.5vw, 42px); }
}


.bk-nav .bk-brand a::before {
  box-shadow: 0 3px 8px #06134e22;
}
.bk-nav .bk-links a:not(:last-child):not(.bk-language a) {
  background: transparent;
  border-color: transparent;
}
.bk-nav .bk-links a:not(:last-child):not(.bk-language a):hover,
.bk-nav .bk-links a:not(:last-child):not(.bk-language a):focus-visible {
  background: #e3effb;
}
.bk-nav .bk-links > a:last-of-type {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}
.bk-about {
  background:
    radial-gradient(ellipse at 98% 0%, #295792 0%, transparent 65%),
    linear-gradient(120deg, #081641, #142b58);
  color: #fff;
}
.bk-about h2 { color: inherit; }
.bk-about h3 { color: #b3def7; }
.bk-about p { color: #e2eefb; }
#ueber-uns > ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#ueber-uns > ul li {
  display: flex;
  align-items: baseline;
  background: linear-gradient(145deg, #fff, #edf5ff);
  padding: 16px 18px;
}
#ueber-uns > ul li::before { flex: none; }
#kontakt .bk-quote-fields label:has(small) {
  grid-template-columns: auto 1fr;
  column-gap: 6px;
}
#kontakt .bk-quote-fields label:has(small) input {
  grid-column: 1 / -1;
}
#kontakt .bk-quote-fields label small { align-self: baseline; }
@media (max-width: 720px) {
  #ueber-uns > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  #ueber-uns > ul { grid-template-columns: 1fr; }
}