/* ═══════════════════════════════════════════════════════════════════
   Buchbinderei & Bildeinrahmung Koch eG — Site-Template "bubi"
   Optische 1:1-Nachbildung des Joomla-Templates "buchbindereikoch",
   neu geschrieben ohne Bootstrap 2 / uikit / MooTools.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --akzent:        #7F5D4D;   /* Braun — Links, Überschriften, aktives Menü */
    --akzent-dunkel: #6A4E40;   /* Buttons */
    --sand:          #D8D1AE;   /* Menüleiste, Modulköpfe */
    --sand-hell:     #D7D0AC;   /* Verlaufsränder des Inhaltsbereichs */
    --grau:          #696961;   /* Sekundärflächen, Readmore */
    --text:          #333;
    --rahmen:        #ccc;
    --breite:        1140px;
}

/* ── Reset ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
    background: url(../img/back.png);
    background-attachment: fixed;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: transparent;
    font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;   /* wie im Original — 140% ergäbe 21px und schöbe den
                            Kopfbereich um 6,5px nach unten */
    color: var(--text);
}

img { max-width: 100%; height: auto; border: 0; }

a {
    color: var(--akzent);
    text-decoration: none;
    transition: all 500ms;
}
a:hover { color: var(--akzent); text-decoration: underline; }

/* Das Original unterstreicht genau einen Fließtext-Link — den Verweis auf
   den Digitaldruck — über einen umschließenden Inline-Style. Ohne ihn wäre
   der einzige Textlink der Website nur an der Farbe erkennbar. */
.textlink { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    line-height: 100%;
    text-rendering: optimizelegibility;
}

/* ── Rahmen ─────────────────────────────────────────────────────── */

#outerwrapper {
    width: var(--breite);
    margin: 30px auto;
    overflow: hidden;
    box-shadow: 0 0 5px 1px #111;
    background: linear-gradient(90deg, var(--sand-hell), #fff, var(--sand-hell));
}

#clear { clear: both; }

/* ── Kopfbereich ────────────────────────────────────────────────── */

/* Kein Padding und kein margin-top: der Kopfbereich nutzt die vollen
   1140px des Rahmens. Andernfalls fehlen 40px und sowohl die
   Kopfgrafiken (284 + 540 + 30 + 274 = 1128px) als auch die achtstellige
   Menüleiste brechen um. */
#headerwrapper { }

#header {
    width: 100%;
    overflow: hidden;
}

#tl, #tr {
    position: relative;
    top: 0;
    float: left;
}

#tl img, #tr img { display: block; }

#tl span, #tr span {
    display: block;
    width: 100%;
    text-align: center;
}

#logo {
    float: left;
    width: 540px;
    margin: 0 30px 0 0;
    position: relative;
    top: 70px;
    z-index: 1000;
}
#logo img { width: 100%; display: block; }

/* ── Hauptmenü ──────────────────────────────────────────────────── */

#mainmenu {
    clear: both;
    width: 100%;
    margin: 20px 0 0;
    padding: 0;
    font-size: 20px;
}

.mainmenu-toggle {
    display: none;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    background: var(--sand);
    color: #000;
    font-family: inherit;
    font-size: 18px;
    text-align: left;
    cursor: pointer;
}
.mainmenu-toggle::before {
    content: "\2630";
    margin-right: 12px;
    font-size: 20px;
    line-height: 1;
}

.mainmenu-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--sand);
}

.mainmenu-list > li { position: relative; }

/* Die Menüpunkte setzen 16px, nicht die 20px von #mainmenu: im Original
   überschreibt uikit/Bootstrap die Größe am <a>. Damit braucht die Leiste
   969px statt 1173px und passt mit den originalen 20px Innenabstand
   bequem in die 1140px des Rahmens. */
.mainmenu-list > li > a {
    display: block;
    padding: 0 20px;
    color: #000;
    font-size: 16px;
    line-height: 50px;
    white-space: nowrap;
    text-shadow: none;
    text-decoration: none;
}

.mainmenu-list > li > a:hover,
.mainmenu-list > li.active > a {
    background: var(--akzent);
    color: #fff;
    text-decoration: none;
}

/* ── Inhalt ─────────────────────────────────────────────────────── */

#contentwrapper {
    margin-top: 20px;
    padding: 20px;
    overflow: hidden;
    background: transparent;
}

#breadcrumb { }

#contentbreit {
    color: var(--text);
    line-height: 140%;
}

#contentbreit h1,
#contentbreit h2 {
    margin: 0 0 20px;
    padding: 0;
    position: relative;
    color: var(--akzent);
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-transform: uppercase;
}

#contentbreit h1 { font-size: 22px; }
#contentbreit h2 { font-size: 20px; }

/* Der Seitentitel wiederholt den Menüpunkt und ist im Original per
   display:none ausgeblendet — sichtbar ist nur das <h2>. Hier bleibt er
   für Screenreader und Suchmaschinen erreichbar, statt ihn zu entfernen.
   Die ID im Selektor ist nötig, um den Außenabstand aus "#contentbreit h1"
   zu überschreiben — sonst bliebe eine 20px-Lücke stehen. */
#contentbreit .seitentitel,
.seitentitel {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
#contentbreit h3 { color: var(--akzent); font-size: 18px; }

#contentbreit p  { margin: 0 0 10px; }
/* Der Einzug ist zweiteilig wie im Original: 25px Außenabstand am ul plus
   20px Innenabstand — die Listenpunkte stehen dadurch bei 127,5px, nicht
   bei 107,5px. */
#contentbreit ul { margin: 0 0 10px 25px; padding-left: 20px; }
#contentbreit li { margin-bottom: 0; line-height: 20px; }

.page-header { margin: 0; padding: 0; border: 0; }

/* Artikelbild links neben dem Text (wie Joomlas .pull-left.item-image):
   feste 500px und 20px Abstand nach rechts, genau wie im Original. */
.item-image {
    float: left;
    width: 500px;
    max-width: 100%;
    margin: 0 20px 0 0;
}
.item-image img { display: block; }

/* 50px Abstand zum Spaltenblock darunter — steht im Original an
   .item-page und macht dort den Abstand zwischen Artikel und Fußspalten. */
.item-page {
    overflow: hidden;
    margin-bottom: 50px;
}

/* ── Bildergalerien ─────────────────────────────────────────────── */

/* Galerien wie im Original: ein 275px-Raster, in dem die Bilder in ihrem
   eigenen Seitenverhältnis stehen — proportional auf höchstens 245px lange
   Kante gebracht, oben ausgerichtet. Kein Rahmen, kein Hintergrund, kein
   Beschnitt: das Joomla-Plugin (showthumb.php mit ratio=1&crop=0) passt die
   Vorschaubilder ebenfalls proportional ein, statt sie quadratisch zu
   schneiden. Der Einzug von 10px entspricht dem des Originals.

   Der Selektor mit ID setzt sich gegen "#contentbreit ul" durch, dessen
   Einzug hier nicht gelten soll. */
#contentbreit .galerie,
.galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    /* Abstände wie im Original: Dort steckt die Galerie in einem <p> und der
       ul selbst ist display:table-cell — dessen Außenabstände ignoriert der
       Browser. Wirksam sind daher nur der 10px-Abstand des Absatzes davor und
       10px des <p>-Wrappers danach. Die 30px unten gehören INNEN in die Box:
       die table-cell-Zeilenbox des Originals macht die Galerie genau 30px
       höher als das höchste Bild. */
    margin: 0;
    padding: 0 0 30px 10px;
    list-style: none;
}


#contentbreit .galerie li,
.galerie li {
    width: 245px;          /* Bildfeld; der Abstand kommt als margin dazu,
                              damit die letzte Kachel keine 30px anhängt und
                              die Reihe in die 1100px des Textbereichs passt */
    margin: 0 30px 0 0;
    line-height: 0;        /* keine Zeilenbox unter dem Bild */
    list-style: none;
}
#contentbreit .galerie li:last-child,
.galerie li:last-child { margin-right: 0; }

.galerie a { display: block; }

.galerie img {
    display: block;
    width: auto;
    height: auto;
    max-width: 245px;
    max-height: 245px;
}

/* ── Lightbox ───────────────────────────────────────────────────── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .85);
    padding: 40px 20px;
}
.lightbox.is-open { display: flex; }

.lightbox img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 30px rgba(0, 0, 0, .8);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    border: 0;
    background: rgba(127, 93, 77, .85);
    color: #fff;
    font-family: inherit;
    font-size: 26px;
    line-height: 1;
    padding: 10px 16px;
    cursor: pointer;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: var(--akzent); }

.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }

.lightbox-caption {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 13px;
    padding: 0 80px;
}

/* ── Die drei Spalten unter dem Inhalt ──────────────────────────── */

#bottomeinswrapper,
#bottomzweiwrapper,
#bottomdreiwrapper {
    margin-top: 20px;
    padding: 20px;
    overflow: hidden;
    background: transparent;
    float: left;
    min-height: 210px;
}

/* content-box: im Original liegen die 20px Innenabstand AUSSERHALB der
   Breite (327 + 40 = 367). Mit dem border-box-Reset wären die Spalten 40px
   zu schmal, und Spalte 2 und 3 rutschten um 40 bzw. 80px nach links. */
#bottomeinswrapper,
#bottomzweiwrapper,
#bottomdreiwrapper { box-sizing: content-box; }

#bottomeinswrapper { width: 327px; margin-right: 20px; }
#bottomzweiwrapper { width: 326px; }
#bottomdreiwrapper { width: 327px; margin-left: 20px; }

.module {
    position: relative;
    background: transparent;
    color: var(--text);
    line-height: 140%;
}

.module h3 {
    margin: 0 0 15px;
    padding: 10px;
    position: relative;
    background: var(--sand);
    color: var(--akzent);
    font-size: 18px;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
}

.module p { margin: 0 0 10px; }
.module p:last-child { margin-bottom: 0; }

.kontakt-tabelle {
    width: 100%;
    border-collapse: collapse;
}
/* Nicht td:last-child ansprechen: durch das rowspan der Bildzelle ist in
   den Folgezeilen die Textzelle die letzte und würde rechtsbündig. */
.kontakt-tabelle td {
    padding: 0 0 2px;
    vertical-align: top;
    text-align: left;
}
.kontakt-tabelle .kontakt-icon {
    width: 40px;
    text-align: right;
    vertical-align: middle;
}

.modul-bild { text-align: center; }

/* ── Fußzeile ───────────────────────────────────────────────────── */

#footer {
    clear: both;
    box-sizing: content-box;   /* 50px Höhe + 2×20px Innenabstand = 90px */
    height: 50px;
    padding: 20px;
    color: var(--text);
    font-size: 13px;
    line-height: 30px;
    text-align: center;
}
#footer a { color: var(--text); text-decoration: none; }
#footer a:hover { text-decoration: underline; }

.footer-links { margin-left: 10px; }
.footer-links a { margin: 0 5px; }

/* ── Buttons ────────────────────────────────────────────────────── */

.button {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--akzent-dunkel);
    color: #fff !important;
    text-decoration: none;
}
.button:hover { background: var(--sand); color: var(--text) !important; }

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    #outerwrapper { width: 100%; margin: 0 auto; }

    #bottomeinswrapper,
    #bottomzweiwrapper,
    #bottomdreiwrapper { width: 273px; }

    /* 17px wie im Original. Innenabstand bleibt bei 20px — bei exakt 1024px
       braucht die Leiste damit 1010px bei 1009px Platz, sie bricht also um.
       Im Original passiert dasselbe, nur rutscht "Datenschutz" dort aus der
       sichtbaren Leiste heraus; hier bleibt der Punkt erreichbar. */
    .mainmenu-list > li > a { font-size: 17px; }
    #logo { width: 400px; }
}

@media (max-width: 800px) {
    #outerwrapper { width: 100%; }

    #headerwrapper { margin-top: 0; }
    #header { background: transparent; }

    #tl, #tr { display: none; }

    #logo {
        float: none;
        width: 96%;
        top: 10px;
        margin: 0 auto 20px;
    }

    #mainmenu { margin-top: 0; }

    /* Wie im Original: 30x30 großes Symbol, rechtsbündig mit 20px Abstand,
       ohne Beschriftung. */
    .mainmenu-toggle {
        display: block;
        width: 30px;
        height: 30px;
        margin: 10px 20px 10px auto;
        padding: 0;
        background: transparent;
        font-size: 0;                 /* blendet das Wort "Menü" aus */
    }
    .mainmenu-toggle::before {
        margin-right: 0;
        font-size: 24px;
        line-height: 30px;
        color: #000;
    }

    .mainmenu-list {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--sand);
    }
    .mainmenu-list.is-open { display: flex; }
    .mainmenu-list > li > a { line-height: 44px; }

    #bottomeinswrapper,
    #bottomzweiwrapper,
    #bottomdreiwrapper {
        float: none;
        width: auto;
        margin: 20px 0 0;
        min-height: 0;
    }

    .item-image {
        float: none;
        width: auto;          /* die festen 500px aufheben */
        max-width: 100%;
        margin: 0 0 20px;
    }
    .item-image img { width: 100%; }

    #contentbreit .galerie,
    .galerie { padding-left: 0; }
    #contentbreit .galerie li,
    .galerie li { width: 45%; margin-right: 5%; }
    .galerie img { max-width: 100%; }

    .lightbox-caption { padding: 0 20px; }
}