/*
Theme Name: Kazakis Pelze
Theme URI: https://www.kazakis-pelze.de
Author: Kazakis Pelze
Description: Maßgeschneidertes Theme für das Kürschneratelier Kazakis Pelze, Frankfurt am Main. Monochrom, bildgeführt, Bodoni Moda und Jost (selbst gehostet). Alle Inhalte der Startseite werden im Customizer gepflegt.
Version: 1.0.3
Requires at least: 5.7
Tested up to: 7.1
Requires PHP: 7.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kazakis
*/

:root{
  --bg:#FBFAF8;
  --ink:#111111;
  --ink-2:#4A4744;
  --grey:#7C7873;
  --hair:#E5E1DB;
  --black:#0D0D0D;
  --on-black:#F3F1ED;
  --serif:"Bodoni Moda","Bodoni 72",Didot,"Didot LT STD",Georgia,serif;
  --sans:"Jost","Futura","Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1280px;
  --pad:clamp(24px,6vw,96px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-optical-sizing:auto;overflow-x:hidden}
h1,h2,h3,p,figure{margin:0}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* ---- Typo-Rollen ---- */
.label{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);line-height:1.6}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;color:var(--ink);text-wrap:balance}
.text{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.85;color:var(--ink-2)}

/* ---- Buttons ---- */
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border:1px solid var(--ink);padding:18px 36px;background:transparent;transition:background .3s ease,color .3s ease,opacity .3s ease}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{opacity:.82}
.btn.light{color:var(--bg);border-color:var(--bg)}
.btn.light:hover{background:var(--bg);color:var(--ink)}
.link{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--ink);transition:opacity .3s}
.link:hover{opacity:.55}

/* ---- Kopf: transparent über dem Startbild, danach fest ---- */
header.site{position:fixed;top:0;left:0;right:0;z-index:100;color:var(--bg);border-bottom:1px solid transparent;
  transition:background .45s ease,color .45s ease,border-color .45s ease}
header.site.solid{background:rgba(251,250,248,.96);color:var(--ink);border-bottom-color:var(--hair)}
.admin-bar header.site{top:32px}
.bar{max-width:var(--max);margin:0 auto;padding:30px var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav{display:flex;gap:34px;align-items:center}
.nav.r{justify-content:flex-end}
.nav a{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:inherit;
  padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .3s}
.nav a:hover{border-bottom-color:currentColor}
.mark{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:.42em;text-transform:uppercase;color:inherit;text-decoration:none;
  padding-left:.42em;white-space:nowrap;line-height:1}

/* ---- Startbild ---- */
.hero{position:relative;height:min(100vh,920px);min-height:560px;display:flex;align-items:flex-end;justify-content:center;
  text-align:center;color:var(--bg);overflow:hidden;background:#1a1512}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 16s var(--ease) both}
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.18) 48%,rgba(0,0,0,.3))}
.hero .inner{position:relative;z-index:2;padding:0 var(--pad) clamp(4.5rem,9vw,7.5rem);max-width:var(--max);width:100%}
.hero .label{color:rgba(251,250,248,.86)}
.hero h1{color:var(--bg);font-size:clamp(3.2rem,8.5vw,7.4rem);line-height:.98;margin:1.6rem auto 0;max-width:16ch}
.hero .text{color:rgba(251,250,248,.86);max-width:40ch;margin:2rem auto 0}
.hero .btn{margin-top:2.8rem}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .inner > *{animation:fade 1.4s var(--ease) both}
.hero .inner > :nth-child(2){animation-delay:.15s}
.hero .inner > :nth-child(3){animation-delay:.3s}
.hero .inner > :nth-child(4){animation-delay:.45s}

/* ---- Abschnitte ---- */
section{position:relative}
.center{text-align:center}

.intro{padding:clamp(6rem,13vw,11rem) var(--pad)}
.intro .display{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.25;max-width:26ch;margin:1.6rem auto 0}
.intro .text{max-width:48ch;margin:2rem auto 0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,8rem);align-items:center;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) clamp(6rem,13vw,11rem)}
.split figure{overflow:hidden}
.split img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e9e6e0;transition:transform 1.6s var(--ease)}
.split figure:hover img{transform:scale(1.03)}
.split h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05;margin-top:1.6rem}
.split .text{max-width:44ch;margin-top:2rem}
.split .link{display:inline-block;margin-top:2.2rem}
.split.rev figure{order:2}

.services{border-top:1px solid var(--hair);padding:clamp(6rem,13vw,11rem) var(--pad)}
.services h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05;margin-top:1.4rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,3rem);max-width:var(--max);margin:4rem auto 0;text-align:left}
.tile figure{overflow:hidden}
.tile img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#e9e6e0;transition:transform 1.6s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tile .label{margin-top:1.6rem}
.tile h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.2vw,2rem);line-height:1.1;margin-top:.5rem;color:var(--ink)}
.tile .text{font-size:15px;margin-top:.8rem;max-width:36ch}
.tile .link{display:inline-block;margin-top:1.3rem}

.statement{position:relative;padding:clamp(8rem,17vw,15rem) var(--pad);text-align:center;color:var(--on-black);overflow:hidden;background:#1a1512}
.statement img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.statement .in{position:relative;z-index:2}
.statement .label{color:rgba(243,241,237,.7)}
.statement p.q{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.8vw,4rem);line-height:1.18;letter-spacing:-.005em;
  max-width:22ch;margin:1.6rem auto 0;color:var(--on-black);text-wrap:balance}

.atelier{padding:clamp(6rem,13vw,11rem) 0 0}
.atelier .split{padding-top:0}
.atelier img.bw{filter:grayscale(1) contrast(1.04);aspect-ratio:4/3}
.atelier .quote{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.1vw,1.7rem);line-height:1.4;margin-top:2.2rem;max-width:32ch;color:var(--ink);text-wrap:balance}
.atelier .who{margin-top:1.4rem}
.atelier figcaption{display:block;margin-top:16px;line-height:1.9;white-space:normal;text-wrap:balance}

.contact{border-top:1px solid var(--hair);padding:clamp(6rem,13vw,11rem) 0}
.contact .split{padding-bottom:0}
.contact h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05;margin-top:1.4rem}
.rows{margin-top:2.6rem;border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.row .v{font-size:15.5px;line-height:1.7;color:var(--ink)}
.row .v a{text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .3s}
.row .v a:hover{border-bottom-color:var(--ink)}
.contact .btn{margin-top:2.6rem}
.contact img{aspect-ratio:4/5}

/* ---- Fuß ---- */
footer.site{background:var(--black);color:rgba(243,241,237,.68);padding:5rem var(--pad) 2.6rem;text-align:center}
footer .mark{font-size:16px;color:var(--on-black)}
footer .links{display:flex;justify-content:center;flex-wrap:wrap;gap:30px;margin-top:2.2rem}
footer .links a{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:rgba(243,241,237,.82);
  padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .3s}
footer .links a:hover{border-bottom-color:currentColor}
footer .legal{margin-top:3rem;font-size:11px;line-height:1.8;letter-spacing:.06em;color:rgba(243,241,237,.45)}

/* ---- Unterseiten (Impressum, Datenschutz, Beiträge) ---- */
.page-main{padding:clamp(10rem,18vw,14rem) var(--pad) clamp(6rem,12vw,9rem)}
.entry,.posts{max-width:760px;margin:0 auto}
.entry-title{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;margin-top:1.4rem}
.entry-content{margin-top:2.6rem;font-size:16px;line-height:1.85;color:var(--ink-2)}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--serif);font-weight:400;color:var(--ink);letter-spacing:-.005em;margin:2.6rem 0 .8rem;line-height:1.15}
.entry-content h2{font-size:clamp(1.7rem,2.6vw,2.3rem)}
.entry-content h3{font-size:1.4rem}
.entry-content h4{font-size:1.15rem}
.entry-content p,.entry-content ul,.entry-content ol{margin:0 0 1.1rem}
.entry-content ul,.entry-content ol{padding-left:1.2rem}
.entry-content a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .3s}
.entry-content a:hover{border-bottom-color:var(--ink)}
.entry-content blockquote{margin:2rem 0;padding-left:1.4rem;border-left:1px solid var(--hair);font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink)}
.entry-content table{border-collapse:collapse;width:100%;font-size:15px}
.entry-content th,.entry-content td{text-align:left;padding:.6rem 0;border-bottom:1px solid var(--hair)}
.post-item{padding:2.4rem 0;border-bottom:1px solid var(--hair)}
.post-item h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.15}
.post-item h2 a{text-decoration:none}
.post-item .entry-content{margin-top:1rem}
.navigation.pagination{margin-top:3rem}
.nav-links{display:flex;gap:1.2rem;flex-wrap:wrap}
.nav-links a,.nav-links span{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--ink)}

/* ---- WordPress-Standardklassen ---- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto!important;clip-path:none;background:var(--bg);color:var(--ink);display:block;height:auto;left:8px;top:8px;padding:12px 18px;width:auto;z-index:1000;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.alignleft{float:left;margin:0 1.5rem 1rem 0}
.alignright{float:right;margin:0 0 1rem 1.5rem}
.aligncenter{display:block;margin:0 auto 1rem}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:.85rem;color:var(--grey);margin-top:.5rem}
.sticky,.bypostauthor{}

/* ---- Einblenden beim Scrollen ---- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero img,.hero .inner > *{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .split img,.tile img{transition:none}
}
@media (max-width:900px){
  .bar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;padding:20px var(--pad)}
  .mark{flex-basis:100%;text-align:center;order:-1}
  .split{grid-template-columns:1fr;gap:2.4rem}
  .split.rev figure{order:0}
  .tiles{grid-template-columns:1fr;gap:3rem}
  .tile img{aspect-ratio:4/3}
  .hero{height:auto;min-height:0;padding-top:12rem}
  .row{grid-template-columns:1fr;gap:.2rem}
}
@media (max-width:782px){
  .admin-bar header.site{top:46px}
}
@media (max-width:520px){
  .nav{gap:20px}
  .atelier figcaption{font-size:10px;letter-spacing:.18em;padding-right:1rem}
  .mark{font-size:17px;letter-spacing:.32em}
  .btn{padding:16px 28px}
}