/* Hartbrich Fotografie — Theme-Styles
   Ergaenzt theme.json um Komponenten, die sich nicht als Token abbilden lassen. */

:root{
  --hb-ink:var(--wp--preset--color--ink);
  --hb-ink-soft:var(--wp--preset--color--ink-soft);
  --hb-paper:var(--wp--preset--color--paper);
  --hb-amber:var(--wp--preset--color--amber);
  --hb-amber-deep:var(--wp--preset--color--amber-deep);
  --hb-muted:var(--wp--preset--color--muted);
  --hb-line:var(--wp--preset--color--line);
  --hb-shadow:0 1px 2px rgba(20,24,29,.05), 0 8px 24px -12px rgba(20,24,29,.18);
}

/* ---------- Grundlagen ---------- */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ max-width:100%; height:auto; }

/* Tastaturbedienung sichtbar machen */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--hb-amber-deep);
  outline-offset:2px;
  border-radius:2px;
}

.hb-skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--hb-ink); color:var(--hb-paper);
  padding:.75rem 1.25rem; text-decoration:none;
}
.hb-skip-link:focus{ left:1rem; top:1rem; }

/* ---------- Kopfbereich ---------- */
.hb-header{
  position:sticky; top:0; z-index:100;
  background:rgba(20,24,29,.94);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hb-header{ color:var(--hb-paper); }
.hb-header a{ color:var(--hb-paper); text-decoration:none; }
.hb-header .wp-block-navigation,
.hb-header .wp-block-navigation a,
.hb-header .wp-block-navigation a:visited,
.hb-header .wp-block-navigation button,
.hb-header .wp-block-navigation .wp-block-navigation-item__content{ color:var(--hb-paper); }
.hb-header .wp-block-navigation__responsive-container.is-menu-open,
.hb-header .wp-block-navigation__responsive-container.is-menu-open a{ color:var(--hb-paper); }
.hb-header .wp-block-site-title a{ font-size:1.15rem; letter-spacing:.01em; }
.hb-header .wp-block-navigation{ font-family:var(--wp--preset--font-family--body); font-size:.95rem; }
.hb-header .wp-block-navigation a:hover{ color:var(--hb-amber); }
.hb-header .wp-block-navigation .current-menu-item > a{ color:var(--hb-amber); }
.hb-header .wp-block-navigation__submenu-container{
  background:var(--hb-ink-soft); border:1px solid rgba(255,255,255,.1);
}
.hb-header .wp-block-navigation__submenu-container a{ color:var(--hb-paper); }
.hb-header .wp-block-navigation__submenu-container a:hover{ color:var(--hb-amber); }

/* Der globale Blockabstand (1.25rem) steht auch zwischen Kopfzeile, main und
   Fussbereich. Auf der Startseite zeigte er sich als heller Streifen zwischen
   dunkler Kopfzeile und Titelbild. Die Abschnitte bringen eigene Abstaende mit. */
.wp-site-blocks > :is(main, footer){ margin-block-start:0; }

/* ---------- Abschnitte ---------- */
.hb-section{ padding-block:var(--wp--preset--spacing--60); }
.hb-section--tight{ padding-block:var(--wp--preset--spacing--50); }
.hb-eyebrow{
  font-family:var(--wp--preset--font-family--body);
  font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--hb-amber-deep); margin-bottom:.6rem;
}
.hb-section--dark .hb-eyebrow{ color:var(--hb-amber); }
/* Lead-Absatz: Breite und Aussenabstaende kommen vom Layout, genau wie bei
   den Ueberschriften daneben -- nur so stehen beide auf derselben Flucht.
   (1.0.4 hat den Absatz mit eigener max-width zentriert, 1.0.5 hat ihn mit
   margin-left:0 an den Rand des Containers geschoben; beides falsch.)
   Die Zeilenlaenge begrenzt ein Raster im Absatz selbst: Der Text laeuft
   in einer Spalte von hoechstens 38rem, die linksbuendig im Absatz steht.
   Nur fuer reine Textabsaetze -- mit Links oder Fettungen wuerde das Raster
   jedes Element zu einer eigenen Zeile machen. */
.hb-lead{ font-size:1.15rem; color:var(--hb-muted); }
.hb-lead:not(:has(*)){ display:grid; grid-template-columns:minmax(0,38rem); }
.hb-lead.has-text-align-center:not(:has(*)){ justify-content:center; }
.wp-block-cover .hb-lead{ color:#d5d9de; }
.hb-section--dark{ background:var(--hb-ink); color:var(--hb-paper); }
.hb-section--dark :is(h1,h2,h3,h4){ color:var(--hb-paper); }
.hb-section--dark .hb-lead{ color:#b9bfc6; }

/* ---------- Karten ---------- */
.hb-card{
  background:var(--wp--preset--color--surface);
  border:1px solid var(--hb-line);
  border-radius:3px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hb-card:hover{ transform:translateY(-2px); box-shadow:var(--hb-shadow); }
.hb-card figure, .hb-card .wp-block-image{ margin:0; }
.hb-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.hb-card__body{ padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.hb-card h3{ margin:0; }
.hb-card p{ margin:0; color:var(--hb-muted); font-size:1rem; }

/* ---------- Preistafel ---------- */
.hb-price{
  border:1px solid var(--hb-line); border-radius:3px;
  background:var(--wp--preset--color--surface);
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.75rem;
}
.hb-price__amount{
  font-family:var(--wp--preset--font-family--display);
  font-size:2rem; font-weight:700; line-height:1; color:var(--hb-ink);
}
.hb-price__unit{ font-size:.95rem; color:var(--hb-muted); font-family:var(--wp--preset--font-family--body); font-weight:400; }
.hb-price ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.hb-price li{ font-size:.97rem; color:var(--hb-muted); padding-left:1.35rem; position:relative; }
.hb-price li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.5rem; height:.5rem; border-radius:50%; background:var(--hb-amber);
}

/* ---------- Ablauf ---------- */
.hb-step__num{
  font-family:var(--wp--preset--font-family--body);
  font-size:.78rem; font-weight:600; letter-spacing:.14em;
  color:var(--hb-amber); text-transform:uppercase;
}

/* ---------- Referenzen ---------- */
.hb-logos{
  display:flex; flex-wrap:wrap; gap:2.5rem 3rem;
  align-items:center; justify-content:center;
}
.hb-logos li{
  list-style:none; font-family:var(--wp--preset--font-family--body);
  font-size:1rem; color:var(--hb-muted); letter-spacing:.01em;
}
/* Logoleiste (inc/referenzen.php ersetzt Namen durch Logos).
   Einheitlich in Graustufen, damit fremde Markenfarben nicht gegen die
   eigene Palette arbeiten; beim Darueberfahren in Originalfarbe. */
.hb-logos.hb-logos--bilder{ padding-left:0; gap:2.25rem 3.25rem; }
.hb-logos--bilder li{ display:flex; align-items:center; min-height:64px; }
.hb-logos__logo img{
  display:block; width:var(--hb-logo-w); max-width:100%; height:auto;
  filter:grayscale(1) brightness(.78); opacity:.8; /* helle Logos (Orange, Cyan) sonst zu blass */
  transition:filter .25s ease, opacity .25s ease;
}
.hb-logos__logo:hover img{ filter:none; opacity:1; }
.hb-logos__name{
  font-family:var(--wp--preset--font-family--display) !important;
  font-size:1.2rem !important; font-weight:600; color:var(--hb-ink) !important;
  opacity:.7; letter-spacing:0;
}
@media (max-width:600px){
  .hb-logos.hb-logos--bilder{ gap:1.5rem 2rem; }
  .hb-logos--bilder li{ min-height:48px; }
  .hb-logos__logo img{ width:calc(var(--hb-logo-w) * .72); }
}
@media (prefers-reduced-motion:reduce){ .hb-logos__logo img{ transition:none; } }

/* ---------- Galerie ---------- */
/* Der Core setzt ".wp-block-gallery.has-nested-images" auf display:flex --
   mit hoeherer Spezifitaet als ".hb-gallery". Das Raster hat deshalb bis
   1.0.5 nie gegriffen; darum hier dieselbe Klassenkette plus .hb-gallery.
   Spaltenzahl: hoechstens die im Editor eingestellte (columns-N), auf
   schmalen Bildschirmen weniger, aber nie schmaler als 150px pro Bild. */
.hb-gallery{ --hb-spalten:3; }
.hb-gallery.columns-2{ --hb-spalten:2; }
.hb-gallery.columns-4{ --hb-spalten:4; }
.hb-gallery.columns-5{ --hb-spalten:5; }
.hb-gallery.columns-6{ --hb-spalten:6; }
.hb-gallery,
.wp-block-gallery.has-nested-images.hb-gallery{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill,
    minmax(max(150px, calc((100% - (var(--hb-spalten) - 1) * .6rem) / var(--hb-spalten))), 1fr));
}
.hb-gallery button{
  padding:0; border:0; background:none; cursor:zoom-in; display:block; width:100%;
}
.hb-gallery img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:2px; }
/* Der Core gibt Galeriebildern feste Prozentbreiten (columns-N, Flex-Layout).
   Hier bestimmt aber das Raster die Spaltenbreite, sonst schrumpfen die Bilder. */
.wp-block-gallery.hb-gallery.has-nested-images figure.wp-block-image{
  width:100% !important; max-width:none !important; margin:0;
}

/* Leuchtkasten */
.hb-lightbox{
  position:fixed; inset:0; z-index:9999;
  background:rgba(10,12,15,.96);
  display:none; align-items:center; justify-content:center; padding:2rem;
}
.hb-lightbox[open], .hb-lightbox.is-open{ display:flex; }
.hb-lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; }
.hb-lightbox__close, .hb-lightbox__nav{
  position:absolute; background:rgba(255,255,255,.1); color:#fff;
  border:1px solid rgba(255,255,255,.25); border-radius:2px;
  font-size:1.4rem; line-height:1; padding:.6rem .8rem; cursor:pointer;
}
.hb-lightbox__close{ top:1.25rem; right:1.25rem; }
.hb-lightbox__nav--prev{ left:1.25rem; top:50%; transform:translateY(-50%); }
.hb-lightbox__nav--next{ right:1.25rem; top:50%; transform:translateY(-50%); }
.hb-lightbox__caption{
  position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%);
  color:#cfd3d8; font-size:.9rem; text-align:center; max-width:60ch;
}

/* ---------- Fussbereich ---------- */
.hb-footer{ background:var(--hb-ink); color:#b9bfc6; padding-block:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.hb-footer a{ color:#d8dce1; text-decoration:none; }
.hb-footer a:hover{ color:var(--hb-amber); text-decoration:underline; }
.hb-footer :is(h2,h3){ color:var(--hb-paper); font-size:1rem; }
.hb-footer__legal{ border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.25rem; font-size:.88rem; }

/* ---------- Inhaltsseiten ---------- */
.hb-prose > *{ margin-block:0 1rem; }
.hb-prose h2{ margin-block:2.2rem .8rem; }
.hb-prose h3{ margin-block:1.6rem .5rem; }
.hb-prose ul, .hb-prose ol{ padding-left:1.3rem; }
.hb-prose li{ margin-bottom:.4rem; }
.hb-prose table{ width:100%; border-collapse:collapse; font-size:.97rem; }
.hb-prose :is(th,td){ border-bottom:1px solid var(--hb-line); padding:.6rem .5rem; text-align:left; }

/* ---------- Beitraege ---------- */
.hb-meta{ font-size:.9rem; color:var(--hb-muted); font-family:var(--wp--preset--font-family--body); }

/* ---------- Kontaktformular ---------- */
.hb-form{ max-width:40rem; }
.hb-form__trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.hb-form__row{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.hb-form__field{ display:flex; flex-direction:column; gap:.35rem; margin:0 0 1.1rem; }
.hb-form label{ font-size:.92rem; font-weight:600; font-family:var(--wp--preset--font-family--body); }
.hb-form :is(input[type=text],input[type=email],input[type=tel],select,textarea){
  font:inherit; font-size:1rem; color:var(--hb-ink);
  background:var(--wp--preset--color--surface);
  border:1px solid var(--hb-line); border-radius:2px;
  padding:.7rem .85rem; width:100%;
  box-sizing:border-box; /* sonst ragt das Feld um Innenabstand und Rahmen ueber den Rand */
}
.hb-form :is(input,select,textarea):focus-visible{ border-color:var(--hb-amber-deep); }
.hb-form textarea{ resize:vertical; min-height:9rem; }
.hb-form__consent{ display:flex; gap:.7rem; align-items:flex-start; margin:0 0 1.4rem; }
.hb-form__consent input{ margin-top:.3rem; flex:none; width:1.05rem; height:1.05rem; accent-color:var(--hb-amber-deep); }
.hb-form__consent label{ font-weight:400; font-size:.95rem; line-height:1.5; }
.hb-form__actions button{
  font:inherit; font-weight:600; cursor:pointer; border:0; border-radius:2px;
  background:var(--hb-amber); color:var(--hb-ink); padding:.85rem 1.8rem;
}
.hb-form__actions button:hover{ background:var(--hb-ink); color:var(--hb-paper); }
.hb-form__hint{ font-size:.85rem; color:var(--hb-muted); margin-top:.9rem; }
.hb-form__ok{
  background:#eaf3ec; border-left:4px solid var(--wp--preset--color--forest);
  padding:1rem 1.2rem; margin-bottom:1.5rem;
}
.hb-form__fehler{
  background:#fbeceb; border-left:4px solid #b33a28;
  padding:1rem 1.2rem; margin-bottom:1.5rem;
}
.hb-form__fehler ul{ margin:.5rem 0 0; padding-left:1.2rem; }

/* Formular auf dunklem Grund */
.hb-section--dark .hb-form label{ color:var(--hb-paper); }
.hb-section--dark .hb-form__hint{ color:#9aa1a9; }
.hb-section--dark .hb-form :is(input[type=text],input[type=email],input[type=tel],select,textarea){
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:var(--hb-paper);
}
.hb-section--dark .hb-form__consent a{ color:var(--hb-amber); }

/* ---------- Logo in der Kopfzeile (inc/marke.php) ---------- */
.hb-header .hb-marke{ margin:0; line-height:0; }
.hb-header .hb-marke a{ display:inline-flex; align-items:center; color:var(--hb-paper); }
.hb-marke__svg{
  display:block; height:38px; width:auto; overflow:visible;
  transform-origin:left center;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), color .25s ease;
}
.hb-marke__blende{
  transform-box:fill-box; transform-origin:center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.hb-marke a:hover .hb-marke__svg,
.hb-marke a:focus-visible .hb-marke__svg{ transform:scale(1.04); }
/* Die Blende dreht sich ein Stueck weiter -- wie beim Schliessen einer echten Blende. */
.hb-marke a:hover .hb-marke__blende,
.hb-marke a:focus-visible .hb-marke__blende{ transform:rotate(30deg); color:var(--hb-amber); }
.hb-marke a:hover .hb-marke__blende{ fill:var(--hb-amber); }
@media (max-width:600px){ .hb-marke__svg{ height:30px; } }

/* ---------- Dezente Reaktionen auf die Maus ----------
   Alles bewusst klein: 2-4 % Vergroesserung, 1-2 px Anheben.
   Nur fuer Geraete mit echter Maus (hover:hover) -- auf dem Handy wuerde ein
   Tippen den Effekt sonst "haengen" lassen. */
@media (hover:hover){
  /* Schaltflaechen heben sich leicht an */
  .wp-block-button__link{ transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
  .wp-block-button__link:hover{ transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(20,24,29,.45); }

  /* Karten: Bild zoomt innerhalb seines Rahmens ganz leicht */
  .hb-card figure, .hb-card .wp-block-post-featured-image{ overflow:hidden; }
  .hb-card img{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .hb-card:hover img{ transform:scale(1.03); }

  /* Galerie: gleiches Prinzip */
  .hb-gallery figure{ overflow:hidden; }
  .hb-gallery img{ transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
  .hb-gallery figure:hover img{ transform:scale(1.03); }

  /* Referenzlogos: etwas groesser und in Farbe */
  .hb-logos__logo img{ transition:filter .25s ease, opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
  .hb-logos__logo:hover img{ transform:scale(1.06); }

  /* Textlinks im Fliesstext: Unterstreichung wird kraeftiger */
  .hb-prose a:not(.wp-block-button__link){ text-underline-offset:.18em; text-decoration-thickness:1px; transition:text-decoration-thickness .15s ease, color .15s ease; }
  .hb-prose a:not(.wp-block-button__link):hover{ text-decoration-thickness:2px; }
}
@media (prefers-reduced-motion:reduce){
  .hb-marke__svg, .hb-marke__blende, .wp-block-button__link, .hb-card img, .hb-gallery img, .hb-logos__logo img{ transform:none !important; }
}

/* ---------- Logo im Fussbereich (inc/marke.php) ----------
   Volle Fassung mit Unterzeile; 80px hoch, damit "Fotografie · Video ·
   Drohne" lesbar bleibt. Gleiche Hover-Reaktion wie in der Kopfzeile. */
.hb-footer .hb-marke-voll{ margin:0 0 1.1rem; line-height:0; }
.hb-footer .hb-marke-voll a{ display:inline-block; color:var(--hb-paper); text-decoration:none; }
.hb-footer .hb-marke-voll a:hover{ text-decoration:none; }
.hb-marke__svg--voll{ height:80px; max-width:100%; }
.hb-marke-voll a:hover .hb-marke__svg,
.hb-marke-voll a:focus-visible .hb-marke__svg{ transform:scale(1.03); }
.hb-marke-voll a:hover .hb-marke__blende,
.hb-marke-voll a:focus-visible .hb-marke__blende{ transform:rotate(30deg); fill:var(--hb-amber); }
@media (max-width:600px){ .hb-marke__svg--voll{ height:auto; width:100%; max-width:340px; } }

/* ---------- YouTube erst nach Klick (inc/datenschutz.php) ---------- */
.hb-video{ margin-block:1.5rem; }
.hb-video__start, .hb-video iframe{
  display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:3px;
}
.hb-video__start{
  position:relative; padding:0; cursor:pointer; overflow:hidden;
  background:var(--hb-ink) center/cover no-repeat; color:var(--hb-paper);
}
.hb-video__start img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.82; transition:opacity .25s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.hb-video__knopf{
  position:absolute; left:50%; top:50%; width:74px; height:74px; margin:-37px 0 0 -37px;
  border-radius:50%; background:rgba(20,24,29,.72); border:2px solid rgba(248,246,242,.9);
  transition:background-color .2s ease, transform .2s ease;
}
.hb-video__knopf::after{
  content:""; position:absolute; left:29px; top:22px;
  border-style:solid; border-width:15px 0 15px 24px;
  border-color:transparent transparent transparent var(--hb-paper);
}
.hb-video__titel{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.1rem .9rem;
  text-align:left; font-weight:600; font-size:1rem;
  background:linear-gradient(transparent, rgba(20,24,29,.85));
}
.hb-video__start:hover .hb-video__knopf,
.hb-video__start:focus-visible .hb-video__knopf{ background:var(--hb-amber-deep); transform:scale(1.06); }
.hb-video__start:hover img{ opacity:1; }
.hb-video__hinweis{ margin:.5rem 0 0; font-size:.82rem; color:var(--hb-muted); }
.hb-video.is-geladen .hb-video__hinweis{ display:none; }