/*
Theme Name: Anton Hahn Architekt
Theme URI: https://hahnarchitekt.de
Author: Anton Hahn Architekt
Description: Individuelles Theme für Anton Hahn Architekt. Zentrale Projekt-Slideshow auf der Startseite (Vorbild: nagler-architekten.de), eigene Foto-Slideshow je Projekt.
Version: 2.0.0
Text Domain: hahn-architekt
*/

/* ===========================================================
   Grundlagen / Design-Tokens
   =========================================================== */
:root {
    --ink: #1c1c1c;
    --gray: #6f6f6f;
    --gray-light: #a8a8a8;
    --hairline: #e4e0dd;
    --white: #ffffff;
    --accent: #7a2331;
    --accent-dark: #5c1a24;
    --maxw: 1100px;
    --gutter: 1.5rem;
    --ff-serif: Georgia, 'Times New Roman', Times, serif;
    --ff-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.hahn-theme {
    margin: 0;
    font-family: var(--ff-sans);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ===========================================================
   Slideshow (Startseite + Projektseite)
   =========================================================== */
.slideshow-wrap {
    max-width: 900px;
    margin: 3rem auto 5rem;
    padding: 0 var(--gutter);
    text-align: center;
}

.slideshow {
    position: relative;
}

.slide { display: none; }
.slide.is-active { display: block; }

.slide-img {
    display: block;
}

/* Feste, einheitliche Bildgröße in der Slideshow (Startseite + Projektseite).
   Die Box hat auf jedem Slide dieselben Maße; das Foto füllt sie per
   object-fit: cover exakt aus (leichter Zuschnitt je nach Seitenverhältnis),
   damit die Slideshow nicht bei jedem Bild "springt". */
.slide-img img {
    margin: 0 auto;
    width: 100%;
    height: 60vh;
    max-height: 620px;
    object-fit: cover;
}

.slideshow-wrap--project .slide img {
    margin: 0 auto;
    width: 100%;
    height: 60vh;
    max-height: 620px;
    object-fit: cover;
}

@media (max-width: 780px) {
    .slide-img img,
    .slideshow-wrap--project .slide img {
        height: 48vh;
        max-height: 420px;
    }
}

@media (max-width: 480px) {
    .slide-img img,
    .slideshow-wrap--project .slide img {
        height: 60vw;
        max-height: 360px;
    }
}

.slide-title {
    margin: 1.5rem 0 0.15rem;
    font-family: var(--ff-serif);
    font-size: 1.05rem;
}

.slide-title a { color: var(--ink); }
.slide-title a:hover { color: var(--accent); }

.slide-meta {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--gray);
}

.slide-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.slide-prev,
.slide-next {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--accent);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.slide-prev:hover,
.slide-next:hover { color: var(--accent-dark); }

.slide-counter {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--gray);
    min-width: 3.5rem;
}

.slide-back {
    margin-top: 2.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.slide-back a { color: var(--accent); }
.slide-back a:hover { color: var(--accent-dark); }

.slideshow-empty {
    color: var(--gray);
    padding: 4rem 0;
}

.project-desc {
    margin: 2.5rem auto 0;
    max-width: 620px;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ink);
}

/* ===========================================================
   Projekte-Übersicht (Grid)
   =========================================================== */
.editable-content {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 3rem var(--gutter) 5rem;
}

.editable-content .slideshow-wrap {
    padding-left: 0;
    padding-right: 0;
}

.editable-content h1 {
    text-align: center;
    font-family: var(--ff-serif);
    font-weight: 400;
    font-size: 1.6rem;
    margin: 1.5rem 0 3rem;
}

.editable-content--page {
    max-width: 720px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
}

@media (max-width: 780px) {
    .projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .projects-grid { grid-template-columns: 1fr; }
}

.project-tile {
    display: block;
    text-align: center;
}

.project-tile img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.project-tile-caption {
    display: block;
    margin-top: 0.75rem;
}

.project-tile-caption .t {
    display: block;
    font-family: var(--ff-serif);
    font-size: 0.95rem;
}

.project-tile-caption .m {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--gray);
    margin-top: 0.15rem;
}

.project-tile:hover .t { color: var(--accent); }

/* ===========================================================
   Footer
   Fest fixiert unten rechts, damit Impressum/Datenschutz auf
   jeder Bildschirmgröße immer sichtbar sind (auch ohne zu scrollen).
   =========================================================== */
body.hahn-theme {
    min-height: 100vh;
}

/* Platz am unteren Seitenrand lassen, damit der fixierte Footer
   nie über dem letzten Inhalt (z. B. Slide-Navigation) liegt. */
body.hahn-theme > main {
    padding-bottom: 4rem;
}

.site-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
    margin: 0;
    padding: 0.85rem 1.1rem;
    text-align: right;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
}

.footer-nav {
    display: inline-flex;
    justify-content: flex-end;
    gap: 1.25rem;
}

.footer-nav a {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}

.footer-nav a:hover { color: var(--gray); }

@media (max-width: 480px) {
    .site-footer { padding: 0.65rem 0.85rem; }
    .footer-nav { gap: 1rem; }
    .footer-nav a { font-size: 0.62rem; }
}

/* ===========================================================
   Generic page content (Impressum / Datenschutz)
   =========================================================== */
.editable-content p,
.editable-content li {
    line-height: 1.7;
    font-size: 0.95rem;
}

.editable-content a { color: var(--accent); text-decoration: underline; }

.editable-content .project-tile,
.editable-content .project-tile:hover,
.editable-content .slideshow-wrap a,
.editable-content .slideshow-wrap a:hover { text-decoration: none; }

.editable-content .slide-title a { color: var(--ink); }
.editable-content .slide-title a:hover { color: var(--accent); }

/* ===========================================================
   Frei hinzugefügte Bilder/Galerien im Editor (z. B. auf der
   Startseite oder der Projekte-Seite ergänzt, ohne Bezug zu einem
   Projekt-Datensatz) – an den restlichen Seitenstil angeglichen.
   =========================================================== */
.editable-content h2,
.editable-content h3 {
    font-family: var(--ff-serif);
    font-weight: 400;
    text-align: center;
    margin: 3rem 0 1.5rem;
}

.editable-content .wp-block-image {
    margin: 2.5rem 0;
    text-align: center;
}

.editable-content .wp-block-image img {
    margin: 0 auto;
}

.editable-content .wp-block-image figcaption {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--gray);
}

.editable-content .wp-block-gallery {
    margin: 2.5rem 0;
}

.editable-content .wp-block-gallery figcaption {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--gray);
}

/* Full-bleed/wide block helpers (behalten für den Block-Editor) */
.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.alignwide {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================================
   Complianz Cookie-Banner: Akzentfarbe angleichen
   =========================================================== */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}