/*
Theme Name: Unsermeiner
Theme URI: https://unsermeiner.com
Author: unsermeiner.com
Description: Photography-first WordPress-Theme für unsermeiner.com – Hundefotografie aus Celle & Eschede. Basiert auf dem "Lightship"-Designsystem (warmes Creme, große Fotoflächen, Pill-Navigation, ein Ember-Orange-Akzent).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: unsermeiner
*/

/* =========================================================
   DESIGN TOKENS (Lightship-System)
   ========================================================= */
:root{
  /* Farben */
  --color-warm-cream:#faf6ef;
  --color-pure-white:#ffffff;
  --color-obsidian:#000000;
  --color-pebble:#999999;
  --color-driftwood:#a1a1a1;
  --color-mist:#d9d9d9;
  --color-ember-orange:#fa5c40;

  /* Schrift */
  --font-primary:'Inter var','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --text-caption:12px;      --leading-caption:1.2;      --tracking-caption:-0.03em;
  --text-body-sm:14px;      --leading-body-sm:1.2;      --tracking-body-sm:-0.03em;
  --text-body:16px;         --leading-body:1.25;        --tracking-body:-0.03em;
  --text-body-lg:20px;      --leading-body-lg:1.25;     --tracking-body-lg:-0.03em;
  --text-subheading:22px;   --leading-subheading:1.2;   --tracking-subheading:-0.03em;
  --text-heading-sm:24px;   --leading-heading-sm:1.2;   --tracking-heading-sm:-0.03em;
  --text-heading:34px;      --leading-heading:1.2;      --tracking-heading:-0.03em;
  --text-heading-lg:48px;   --leading-heading-lg:1;     --tracking-heading-lg:-0.05em;
  --text-display:72px;      --leading-display:1;        --tracking-display:-0.05em;

  /* Abstand */
  --spacing-4:4px; --spacing-8:8px; --spacing-12:12px; --spacing-16:16px;
  --spacing-20:20px; --spacing-24:24px; --spacing-28:28px; --spacing-40:40px;
  --spacing-64:64px; --spacing-100:100px;

  /* Layout */
  --page-max-width:1440px;
  --section-gap:100px;
  --card-padding:24px;
  --element-gap:16px;

  /* Radien */
  --radius-cards:20px;
  --radius-images:20px;
  --radius-pill:100px;
}

@media (max-width:780px){
  :root{
    --section-gap:56px;
    --text-display:44px;
    --text-heading-lg:34px;
    --text-heading:26px;
  }
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-warm-cream);
  color:var(--color-obsidian);
  font-family:var(--font-primary);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  letter-spacing:var(--tracking-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
input,textarea{font-family:inherit;}

h1,h2,h3,h4{margin:0 0 var(--spacing-16);font-weight:400;letter-spacing:var(--tracking-heading);}
h1{font-size:var(--text-heading-lg);letter-spacing:var(--tracking-heading-lg);line-height:var(--leading-heading-lg);}
h2{font-size:var(--text-heading);line-height:var(--leading-heading);}
h3{font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);}
p{margin:0 0 var(--spacing-16);color:var(--color-obsidian);}
.muted{color:var(--color-pebble);}

.container{
  max-width:var(--page-max-width);
  margin:0 auto;
  padding:0 var(--spacing-40);
}
@media (max-width:780px){ .container{padding:0 var(--spacing-20);} }

.section{padding:var(--section-gap) 0;}
.section-tight{padding:calc(var(--section-gap)/2) 0;}

/* =========================================================
   GHOST BUTTON / PILL LINK (einziges interaktives Muster)
   ========================================================= */
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:var(--spacing-8);
  font-size:var(--text-body-sm);
  padding:var(--spacing-12) var(--spacing-24);
  border:1px solid var(--color-obsidian);
  border-radius:var(--radius-pill);
  background:transparent;
  transition:background .2s ease,color .2s ease;
}
.btn-ghost:hover{background:var(--color-obsidian);color:var(--color-pure-white);}
.btn-ghost.on-dark{border-color:var(--color-pure-white);color:var(--color-pure-white);}
.btn-ghost.on-dark:hover{background:var(--color-pure-white);color:var(--color-obsidian);}

.link-underline{position:relative;}
.link-underline::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s ease;
}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left;}

.pill-chip{
  border-radius:var(--radius-pill);
  padding:var(--spacing-8) var(--spacing-16);
  font-size:var(--text-body-sm);
}
.accent-strip{
  background:var(--color-ember-orange);
  border-radius:var(--radius-cards);
  padding:var(--spacing-4) var(--spacing-12);
  display:inline-block;
  color:var(--color-pure-white);
  font-size:var(--text-caption);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:50;
  padding:var(--spacing-24) 0;
}
.site-header.is-solid{
  position:sticky;
  background:var(--color-warm-cream);
  border-bottom:1px solid var(--color-mist);
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header .site-branding{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:var(--text-body-sm);
  letter-spacing:.4em;
  text-transform:uppercase;
}
.site-header .site-branding a{color:inherit;}
.nav-left,.nav-right{display:flex;align-items:center;gap:var(--spacing-24);}
.primary-menu{display:flex;gap:var(--spacing-24);}
.primary-menu a{font-size:var(--text-body-sm);}

.menu-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:var(--radius-pill);
  align-items:center;
}
.menu-toggle span{display:block;width:22px;height:2px;background:currentColor;}
@media (min-width:900px){ .menu-toggle{display:none;} }
@media (max-width:899px){
  .primary-menu{display:none;}
}

.theme-light .site-header,.theme-light .site-header a{color:var(--color-obsidian);}
.theme-dark .site-header,.theme-dark .site-header a{color:var(--color-pure-white);}

/* Mobile flyout */
.mobile-nav{
  position:fixed;inset:0;background:var(--color-warm-cream);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-24);
  transform:translateY(-100%);transition:transform .3s ease;z-index:100;
}
.mobile-nav.is-open{transform:translateY(0);}
.mobile-nav a{font-size:var(--text-heading-sm);}
.mobile-nav-close{position:absolute;top:24px;right:24px;}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  width:100%;
  height:100vh;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--color-obsidian);
}
.hero img.hero-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 45%);
}
.hero-content{
  position:relative;z-index:2;
  width:100%;
  padding-bottom:var(--spacing-64);
}
.hero-split{
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--spacing-40);
}
.hero-headline{
  color:var(--color-pure-white);
  font-size:var(--text-display);
  line-height:var(--leading-display);
  letter-spacing:var(--tracking-display);
  max-width:640px;
}
.hero-side{
  color:var(--color-pure-white);
  font-size:var(--text-body-lg);
  max-width:320px;
  text-align:right;
}
@media (max-width:780px){
  .hero-split{flex-direction:column;align-items:flex-start;}
  .hero-side{text-align:left;}
}

/* =========================================================
   MOSAIK / PORTFOLIO GRID
   ========================================================= */
.mosaic{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--spacing-24);
}
.mosaic-item{
  border-radius:var(--radius-images);
  overflow:hidden;
  background:var(--color-pure-white);
}
.mosaic-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
.mosaic-item.span-4{grid-column:span 4;}
.mosaic-item.span-3{grid-column:span 3;}
.mosaic-item.span-2{grid-column:span 2;}
.mosaic-item.offset-up{margin-top:-40px;}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(2,1fr);}
  .mosaic-item.span-4,.mosaic-item.span-3,.mosaic-item.span-2{grid-column:span 1;}
  .mosaic-item.offset-up{margin-top:0;}
}

/* =========================================================
   KARTEN (Pakete, Leistungen)
   ========================================================= */
.card-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-24);
}
@media (max-width:900px){ .card-grid{grid-template-columns:1fr;} }
.card{
  background:var(--color-pure-white);
  border-radius:var(--radius-cards);
  padding:var(--card-padding);
  border:1px solid var(--color-mist);
}
.card h3{margin-bottom:var(--spacing-8);}
.card .price{font-size:var(--text-heading-sm);margin-bottom:var(--spacing-16);}
.card ul{margin-bottom:var(--spacing-24);}
.card li{padding:var(--spacing-4) 0;color:var(--color-pebble);font-size:var(--text-body-sm);border-top:1px solid var(--color-mist);}
.card li:first-child{border-top:none;}

/* =========================================================
   EDITORIAL / TEXT+BILD
   ========================================================= */
.editorial{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-64);align-items:center;
}
@media (max-width:900px){ .editorial{grid-template-columns:1fr;gap:var(--spacing-40);} }
.editorial img{border-radius:var(--radius-images);}

/* =========================================================
   KONTAKT / FORMULAR
   ========================================================= */
.pill-field{
  width:100%;
  border:1px solid var(--color-mist);
  border-radius:var(--radius-pill);
  padding:var(--spacing-12) var(--spacing-20);
  background:var(--color-pure-white);
  font-size:var(--text-body);
  margin-bottom:var(--spacing-16);
}
.pill-field:focus{outline:none;border-color:var(--color-obsidian);}
textarea.pill-field{border-radius:var(--radius-cards);min-height:160px;resize:vertical;}
.form-notice{
  border-radius:var(--radius-cards);
  padding:var(--spacing-16) var(--spacing-24);
  margin-bottom:var(--spacing-24);
  font-size:var(--text-body-sm);
}
.form-notice.success{background:var(--color-ember-orange);color:var(--color-pure-white);}
.form-notice.error{background:var(--color-obsidian);color:var(--color-pure-white);}
.hp-field{position:absolute;left:-9999px;opacity:0;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--color-mist);
  padding:var(--spacing-64) 0 var(--spacing-40);
}
.footer-grid{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--spacing-24);margin-bottom:var(--spacing-40);
}
.footer-col a{display:block;font-size:var(--text-body-sm);color:var(--color-pebble);margin-bottom:var(--spacing-8);}
.footer-bottom{
  display:flex;justify-content:space-between;font-size:var(--text-caption);color:var(--color-driftwood);
  border-top:1px solid var(--color-mist);padding-top:var(--spacing-24);flex-wrap:wrap;gap:var(--spacing-8);
}

/* Divider */
.hairline{border:none;border-top:1px solid var(--color-mist);margin:0;}

/* WordPress core */
.alignwide{max-width:1200px;margin-left:auto;margin-right:auto;}
.alignfull{width:100%;max-width:none;}
.screen-reader-text{position:absolute;left:-9999px;}