/*
 * Wiederkehrende Bausteine: Kachelraster der Uebersichtsseiten, die
 * Spaltenhilfsklassen der Detailseiten, der Kasten unter dem Inhalt,
 * Formulare und die Bildvergroesserung.
 * Werte aus template.css und 2018.css der Vorgaengerseite.
 */

/* -------------------------------------- Kachelraster Uhren / Referenzen */

#referenzen img {
    width: 100%;
    max-width: 202px;
    height: 130px;
    margin: 0 15px 15px 0;
}

.ref-box {
    margin: 0 15px 15px 0;
    width: 100%;
    max-width: 202px;
    height: 130px;
    border: 1px solid #f7f0d7;
    float: left;
}

.ref-box p {
    text-align: center;
    margin-top: 55px;
}

#referenzen.uhren {
    display: flex;
    flex-flow: row wrap;
    margin-left: 15px;
    justify-content: space-between;
    align-content: flex-start;
}

#referenzen.uhren .ref-box {
    border: none;
    max-width: none;
    height: auto;
    width: auto;
}

#referenzen.uhren .ref-box a {
    display: flex;
}

#referenzen.uhren .ref-box img {
    border: 1px solid #f7f0d7;
    object-fit: cover;
    display: block;
    position: relative;
    width: 100%;
    max-width: 160px;
    height: 130px;
    margin: 0;
}

/* ------------------------------------------- Spalten innerhalb der Inhalte */

.left {
    float: left;
    width: 100%;
    max-width: 700px;
}

.leftuhr1 {
    float: left;
    width: 100%;
    max-width: 655px;
}

.right {
    float: right;
    width: 100%;
    max-width: 190px;
}

.rightuhr1 {
    float: right;
    width: 100%;
    max-width: 240px;
}

.ref-links {
    float: left;
    width: 100%;
    max-width: 350px;
}

.refuhr-links {
    float: left;
    width: 100%;
    max-width: 270px;
}

.ref-middle {
    width: 100%;
    max-width: 350px;
    float: left;
}

.ref-right {
    float: right;
    width: 100%;
    max-width: 200px;
}

.ref-right img {
    padding: 0;
}

.left-text {
    padding-right: 20px;
}

.middleuhr1 {
    padding-right: 10px;
}

.kontaktleft {
    width: 100%;
    max-width: 450px;
    float: left;
}

.kontaktright {
    width: 100%;
    max-width: 440px;
    float: left;
}

.galerie16 {
    clear: both;
    position: relative;
    top: 10px;
}

.galerie16 > div {
    height: 125px;
    text-align: center;
}

.wrapper-dresden {
    position: relative;
    top: 30px;
    left: 95px;
}

.wrapper-dresden p {
    width: 100%;
    max-width: 252px;
}

/* -------------------------------------------------- Kasten unter dem Inhalt */

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

.well .page-header {
    margin: 0 0 5px 0;
}

.well.mythos-unter-contente {
    padding: 10px 40px;
    margin-bottom: 0;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: -10px;
    border: none;
    background-color: #2f3646;
}

main#content .overlay1mod {
    position: absolute;
    left: -20px;
    top: 0;
    width: calc(100% + 20px);
    height: 100%;
    transition: all ease-out .75s;
    z-index: 9000;
    background-size: cover;
    background-position: center center;
    border-radius: 0 10px 10px 0;
}

/* ------------------------------------------------------------- Formulare */

/*
 * Kontakt- und Bestellformular. Beschriftungen, Spaltenaufteilung, Masse und
 * Farben stammen aus template.css (Bootstrap 2) und form.css der
 * Vorgaengerseite, damit die Darstellung unveraendert bleibt.
 */

/*
 * Beide Formulare stehen im Original in einem eigenen Kasten mit leicht
 * aufgehelltem Grund. Er ist auf 281 Pixel begrenzt und scrollt; durch
 * overflow-y bildet er ausserdem einen eigenen Formatierungskontext und
 * stellt sich damit neben ein umflossenes Bild.
 */
.uniform {
    padding: 30px 15px;
    background-color: rgba(255, 255, 255, .15);
    overflow-y: scroll;
    /* Feste Hoehe wie im Original, damit der Kasten unabhaengig von der
       Feldanzahl gleich hoch bleibt. */
    height: 281px;
}

/*
 * Bezugspunkt fuer die Spamfalle. Ohne ihn haengt sie am Seitenanfang und
 * verlaengert das Dokument, weil der Kasten sie dann nicht mehr abschneidet.
 */
.uniform-form {
    position: relative;
}

.uniform-row::after {
    display: table;
    content: "";
    clear: both;
}

.uniform-col {
    box-sizing: border-box;
    float: left;
    width: 100%;
    margin-left: 2.127659574%;
}

.uniform-col:first-child {
    margin-left: 0;
}

.uniform-col-half {
    width: 48.936170208%;
}

/*
 * Bootstrap 2 wechselt die Spaltenmasse mit der Fensterbreite. Die drei
 * Stufen stammen aus template.css der Vorgaengerseite: breites Raster ab
 * 1200 Pixel, schmales von 768 bis 979, darunter volle Breite.
 */
@media (min-width: 1200px) {
    .uniform-col {
        margin-left: 2.564102564102564%;
    }

    .uniform-col-half {
        width: 48.717948717948715%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .uniform-col {
        margin-left: 2.7624309392265194%;
    }

    .uniform-col-half {
        width: 48.61878453038674%;
    }
}

@media (max-width: 767px) {
    .uniform-col,
    .uniform-col-half {
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

.uniform-field {
    padding: 2px;
    border: 1px solid transparent;
}

.uniform-label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: bold;
}

.uniform-required {
    margin: 0 5px;
    color: red;
    font-weight: bold;
}

.uniform-input {
    display: inline-block;
    box-sizing: content-box;
    width: 95%;
    height: 18px;
    padding: 4px 6px;
    margin-bottom: 9px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border linear .2s, box-shadow linear .2s;
}

select.uniform-input {
    height: 28px;
    padding: 4px;
}

.uniform-textarea {
    height: auto;
}

/*
 * Auf den Buchseiten stand das Formular im Original in einem Absatz. Der
 * Browser teilte diesen auf und liess dahinter einen leeren Absatz stehen.
 */
.uniform-order {
    margin-bottom: 9px;
}

/* Das Bestellformular hat im Original weitere Felder und keinen Schatten. */
.uniform-order .uniform-input {
    padding: 10px;
    background-color: rgba(255, 255, 255, .8);
    box-shadow: none;
}

.uniform-order select.uniform-input {
    height: 40px;
}

.uniform-input:focus {
    border-color: rgba(82, 168, 236, .8);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
}

.uniform-checkbox {
    display: block;
    min-height: 18px;
    padding-left: 20px;
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 18px;
}

.uniform-checkbox input[type="checkbox"] {
    float: left;
    width: auto;
    margin: 4px 0 0 -20px;
    font-size: 13px;
    line-height: normal;
}

/* Rechnungsadresse: im Original erst nach dem Ankreuzen sichtbar. */
.uniform-billing[data-hidden] {
    display: none;
}

.uniform-actions {
    padding: 0;
    margin: 0;
    text-align: left;
}

.uniform-actions::after {
    display: table;
    content: "";
    clear: both;
}

.uniform-toolbar {
    margin: 9px 0;
}

.uniform-actions-left .uniform-toolbar {
    float: left;
}

.uniform-btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .75);
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #bbb;
    border-bottom-color: #a2a2a2;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.uniform-btn:hover,
.uniform-btn:focus {
    color: #333;
    text-decoration: none;
    background-color: #e6e6e6;
    background-position: 0 -15px;
    transition: background-position .1s linear;
}

.uniform-btn-inverse {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
    background-color: #363636;
    background-image: linear-gradient(to bottom, #444, #222);
    border-color: #222 #222 #000;
}

.uniform-btn-inverse:hover,
.uniform-btn-inverse:focus {
    color: #fff;
    background-color: #222;
}

/* Absendeknopf: groesser gesetzt, ohne Verlauf und Schattenschrift. */
.uniform-actions .uniform-btn-inverse {
    padding: 15px;
    margin-left: 5px;
    font-size: 18px;
    font-weight: bold;
    color: #f7f0d7;
    text-shadow: none;
    background-color: #232323;
    background-image: none;
}

.uniform-actions .uniform-btn-inverse:hover,
.uniform-actions .uniform-btn-inverse:focus {
    color: #f7f0d7;
    background-color: #323232;
}

/* Spam-Falle: fuer Menschen unsichtbar, aber nicht per display:none entfernt. */
.uniform-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.uniform-message {
    padding: 8px 14px;
    margin-bottom: 18px;
    color: #468847;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.uniform-message.is-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.uniform-error {
    display: block;
    margin-bottom: 9px;
    color: #b94a48;
    font-size: 12px;
    font-weight: bold;
}

/* ----------------------------------------------------- Bildvergroesserung */

/*
 * Ersetzt die Fancybox-Einbindung der Vorgaengerseite. Overlay, Rahmen,
 * Schliess- und Blaetterschaltflaechen verwenden dieselben Grafiken und
 * Masse, damit die Darstellung unveraendert bleibt.
 */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8010;
    overflow: hidden;
    background: url("../images/lightbox/fancybox_overlay.png");
}

.lightbox-frame {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8030;
    padding: 15px;
    background: #f9f9f9;
    color: #444;
    border-radius: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
}

.lightbox-frame img {
    display: block;
    max-width: calc(100vw - 100px);
    max-height: calc(100vh - 100px);
    width: auto;
    height: auto;
    border: 0;
}

.lightbox-close,
.lightbox-nav {
    background-image: url("../images/lightbox/fancybox_sprite.png");
    background-repeat: no-repeat;
    border: 0;
    padding: 0;
    cursor: pointer;
    position: absolute;
    z-index: 8040;
}

.lightbox-close {
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    background-position: 0 0;
}

.lightbox-nav {
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    background-color: transparent;
}

.lightbox-prev {
    left: -50px;
    background-position: 0 -36px;
}

.lightbox-next {
    right: -50px;
    background-position: 0 -72px;
}

.lightbox-nav[hidden] {
    display: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    .lightbox-close,
    .lightbox-nav {
        background-image: url("../images/lightbox/fancybox_sprite@2x.png");
        background-size: 44px 152px;
    }
}