@charset "UTF-8";

/* Farben

Logo-Grün   #7B965F     123, 150, 95
Logo-Lila   #8A667B     138, 102, 123

*/

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-heading-color: ;
  --bs-link-color: #CAA6BB;
  --bs-link-hover-color: #9BB67F;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;
}

/* sanchez-regular - latin */
@font-face {
  font-family: 'Sanchez';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/sanchez-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Sanchez'), local('Sanchez-Regular'),
       url('../webfonts/sanchez-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/sanchez-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/sanchez-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/sanchez-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/sanchez-v6-latin-regular.svg#Sanchez') format('svg'); /* Legacy iOS */
}

/* barlow-condensed-600 - latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/barlow-condensed-v12-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/barlow-condensed-v12-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/barlow-condensed-v12-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/barlow-condensed-v12-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/barlow-condensed-v12-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/barlow-condensed-v12-latin-600.svg#BarlowCondensed') format('svg'); /* Legacy iOS */
}

/* barlow-200 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 200;
  src: url('../webfonts/barlow-v12-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/barlow-v12-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/barlow-v12-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/barlow-v12-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/barlow-v12-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/barlow-v12-latin-200.svg#Barlow') format('svg'); /* Legacy iOS */
}
/* barlow-500 - latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/barlow-v12-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../webfonts/barlow-v12-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../webfonts/barlow-v12-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../webfonts/barlow-v12-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../webfonts/barlow-v12-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../webfonts/barlow-v12-latin-500.svg#Barlow') format('svg'); /* Legacy iOS */
}

body {
    background-color:		#222222;
	font-family:			'Barlow', sans-serif;
    font-weight:			200;
	font-size:				18px;
	line-height:			1.5rem;
	background-size:		cover;
	background-position:	center center;
	background-repeat:		no-repeat;
	color:					#ffffff;
	background-image:		url(../images/bg/141005blech-bg.jpg);
	background-attachment:	fixed;
}


h1 {
    font-family: 'Sanchez';
    font-style: normal;
    font-weight: 400;
}

h2, h3, h4, h5, h6 {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

a {
    color: rgba(172, 210, 133, 1);
    font-weight: 500;
    text-decoration: none;
    padding: 2px 0;
    border-top: 1px rgba(0, 0, 0, 0) solid;
    border-bottom: 1px rgba(0, 0, 0, 0) solid;
}

a:hover, a:active, a:focus {
    color: rgba(193, 143, 172, 1);
    border-top: 1px rgba(193, 143, 172, 1) solid;
    border-bottom: 1px rgba(193, 143, 172, 1) solid;
}

table, .table {
    color: #ffffff;
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------- Buttons ----------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------------ */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #7B965F;
  --bs-btn-border-color: #7B965F;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8A667B;
  --bs-btn-hover-border-color: #8A667B;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #8A667B;
  --bs-btn-border-color: #8A667B;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #7B965F;
  --bs-btn-hover-border-color: #7B965F;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}


/* --------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------ Navbar ------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------------------------------- */
nav {
    background-image: url("images/220808hg-wellpappe-2000-500.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px rgba(0, 0, 0, 1);
}

.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(0, 0, 0, 0.55);
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
  --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
  --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.5rem;
  --bs-navbar-toggler-padding-x: 0.5rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28123, 150, 95, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: #7B965F;
  --bs-navbar-toggler-border-radius: 0.375rem;
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  --bs-border-width: 3px;
  --bs-navbar-color: #8A667B;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}

.nav-link {
    font-family: 'Sanchez', sans-serif;
    color: #7B965F;
    border-top: 2px rgba(0, 0, 0, 0) solid;
    border-bottom: 2px rgba(0, 0, 0, 0) solid;
    text-align: center;
}

.nav-link:hover, .nav-link:active, .nav-link:focus {
    color: #8A667B;
    border-top: 2px #8A667B solid;
    border-bottom: 2px #8A667B solid;
}

.navbar-brand:hover, .navbar-brand:active, .navbar-brand:focus {
    border-top: 1px rgba(0, 0, 0, 0) solid;
    border-bottom: 1px rgba(0, 0, 0, 0) solid;
}


/* X-Small devices (portrait phones, less than 576px) – No media query for `xs` since this is the default in Bootstrap */
.navbar-logo {
    margin-top: 0.5rem;
    width: 250px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .navbar-logo {
        margin-top: 0.5rem;
        width: 250px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .navbar-logo {
        margin-top: 0.7rem;
        width: 350px;
    }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar-logo {
        margin-top: 0.8rem;
        width: 400px;
    }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .navbar-logo {
        margin-top: 0.9rem;
        width: 450px;
    }

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .navbar-logo {
        margin-top: 1rem;
        width: 500px;
    }

}

/* --------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------ Content ------------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------------------- */

h1 { margin-top: 3.5rem; margin-bottom: 1.00rem; }
h2 { margin-top: 3.0rem; margin-bottom: 0.75rem; }
h3 { margin-top: 2.5rem; margin-bottom: 0.50rem; }
h4 { margin-top: 2.0rem; margin-bottom: 0.25rem; }
h5 { margin-top: 1.5rem; margin-bottom: 0.10rem; }
h6 { margin-top: 1.0rem; margin-bottom: 0.00rem; }


.description {
    font-family:			'Barlow', sans-serif;
    font-weight:			200;
	font-size:				0.9rem;
    margin-top:				0;
}

.smallHeading {
	color:				rgba(255,255,255,0.8);
    font-weight:		200;
	font-size:			80%;
}


.foto-bildunter {
    margin-bottom: 0;
}

.text-bildunter {
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
    font-size: 90%;
}

/* --------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------ Tortengalerie ------------------------------------------------------ */
/* --------------------------------------------------------------------------------------------------------------------------------- */
.media-scroller {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    /* grid-auto-columns: 23%; */
    padding: 0 1rem 1rem 0;
    
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    margin-bottom: 1rem;
}

.media-event {
    display: grid;
    grid-template-rows: min-content;
    gap: 0.5rem;
    padding: 0;
    background-color: #8A667B;
    border: 0.3rem #8A667B solid;
    border-radius: 3px;
}

.media-event-landscape {
    grid-template-columns: 36rem;
}

.media-event-portrait {
    grid-template-columns: 16rem;
}

.media-event img.media-event-img-landscape {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.media-event img.media-event-img-portrait {
    inline-size: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.media-event img.media-event-img-square {
    inline-size: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 1rem;
}

.snaps-inline > * {
    scroll-snap-align: start;
}

.media-event-title {
    
}

a.photoZoomLink, a.photoZoomLink:hover, a.photoZoomLink:active, a.photoZoomLink:focus {
    border-top: none;
    border-bottom: none;
}


.wedding-container {
    margin-top: 3rem;
    margin-bottom: 3rem;
    border: 0;
    border-top: 1px solid rgba(216, 216, 216, 0.8);
}

.wedding-description {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}

.wedding-table {
    margin-left: 0.5rem;
    margin-bottom: 0;
}

.wedding-table td {
    padding-right: 0.35rem;
    padding-bottom: 0.35rem;
}

.wedding-table tr td:nth-child(1) {
    width: 25px;
}
.wedding-table tr td:nth-child(2) {
    width: 90px;
}
.wedding-table tr td:nth-child(3) {
    width: 190px;
}

.wedding-icon {
    color: #00747d;
}

.wedding-profession {
    font-size: 80%;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    color: #666666;
    text-transform: uppercase;
}

.btn-wedding {
    color: #333333;
    background-color: #ffffff;
    border: 1px #c3c3c3 solid;
}

.btn-wedding:hover, .btn-wedding:active, .btn-wedding:focus {
    background-color: #00747d;
    border-color: #00747d;
    color: #ffffff;
}

.descTable {
    width: 100%;
    margin: 0.25rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;
}


.price-left {
  text-align: right !important;
  margin-bottom: 0;
}
.price-right {
  text-align: left !important;
  margin-bottom: 0.75rem;
}

@media (max-width: 992px) {

.price-left {
  text-align: center !important;
  margin-bottom: 0;
}
.price-right {
  text-align: center !important;
  margin-bottom: 0.75rem;
}

}


.ratio-9x16 {
  --aspect-ratio: calc(16 / 9 * 100%);
}



/* -------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------ Footer ------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------------------------------------------- */

footer {
    background-image: url("images/220808hg-wellpappe-2000-500.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 4px rgba(0, 0, 0, 1);
    padding: 2rem 0 1rem 0;
    margin-top: 5rem;
    text-align: center;
    font-family: 'Sanchez', sans-serif;
    font-size: 1rem;
}

footer p {
    color: rgba(0, 0, 0, 0.8);
}

footer a {
    color: #7B965F;
    text-decoration: none;
    padding: 3px 0;
    border-top: 1px rgba(0, 0, 0, 0) solid;
    border-bottom: 1px rgba(0, 0, 0, 0) solid;
}

footer a:hover, footer a:active, footer a:focus {
    color: #8A667B;
    border-top: 1px #8A667B solid;
    border-bottom: 1px #8A667B solid;
}


/* ------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------ */





/* ------------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------ Debug ------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------- */
.fehlt { color: #ff0000 !important; text-shadow: 0 0 2px #00ff00; }