/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    /* fonts */
    --font-stack-default: 'charter-bt-pro', 'Arial', sans-serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    
    /* text  */
    --text-color: #000; /* black */
    --text-color-light: #fff;
    --text-color-link: #35326B; /* lila */
    
    /* font-sizes */
    --font-size-root: 20px;
    --font-size-h1: 4rem; /* 80px */
    --font-size-h2: 4rem; /* 80px */
    --font-size-h2-small: 2rem; /* 40px */
    --font-size-h3: 1.4rem;
    --font-size-lead: 1.4rem;
    --font-size-quote: 1.4rem;
    --font-size-number: 4rem; /* 80px */
    --font-size-body: 1rem;
    --font-size-body-s: 0.77rem;
    
    /* colors / background */
    --bg-content: #89C2E8; /* blue */
    --color-blue: #89C2E8; /* blue */
    --color-green: #C9E0B0; 
    --color-green-dark: #49806A; 
    --color-pink: #DEC3E0; 
    --color-light: #ffffff; /* white */
    --color-lila: #35326B; /* lila */
    --color-highlight: #35326B; /* lila */
    
    /* lines */
    --border-basic: #D8D8D8;
    
    /* spacing between components based on rem */
    --spacing-l: 6rem;
    --spacing-m: 3rem; 
    --spacing-s: 1.5rem;
    --spacing-xs: 0.75rem;    
     
    /* grid */
    --grid-container: 32px;
    --grid-row: -16px;
    --grid-col: 16px;
    
    /* form */
    --border-form: #35326B; 
    --border-form-focus: #DEC3E0;
    --form-disabled: #ccc;
    --form-error: #dd0000;
    --form-ok: #00828C;
    --form-initial: #1D1D1B;
}

/* ==========================================================================
   Variables Exeptions for different backgrounds
   ========================================================================== */

.c-text-light {
    --text-color: #fff;
    --text-color-link: #fff;
    --color-highlight: #fff;
}

.c-travel {
    --border-basic: #9bb999;
}

.c-programm {
    --border-basic: #6f6d8b;
}

.c-info{
    --border-basic: #8d82a7;
}


/* ==========================================================================
   Variables Responsive Custom Properties
   ========================================================================== */

@media only screen and (min-width:1200px) {
    :root {
        --grid-container: 48px;
        --grid-row: -24px;
        --grid-col: 24px;
    }
}

@media only screen and (min-width:1600px) {
    :root {
        --grid-container: 64px;
        --grid-row: -32px;
        --grid-col: 32px;
    }
}


@media only screen and (max-width:980px) {
    :root {
        --spacing-l: 3.5rem;
        --spacing-m: 1.5rem; 
    }
    
    .c-countdown {
        --grid-row: -10px;
        --grid-col: 10px;
    }
}




/* ==========================================================================
   Base
   ========================================================================== */

body {
	background-color: #fff;
    background-color: var(--bg-content);
	color: #000;
    color: var(--text-color);
	font-family: 'charter-bt-pro', sans-serif;
    font-family: var(--font-stack-default);
	font-weight: normal;
    font-weight: var(--font-weight-normal);
    font-size: 20px;
    font-size: var(--font-size-body);
	-webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* links */
a,
a:visited,
a:focus,
a:hover {
	color: #000;
    color: var(--text-color-link);
	text-decoration: none;
}

p:empty {
    display: none;
}

.c-hide-visually {
	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* ==========================================================================
   Base Forms
   ========================================================================== */


input,
select,
textarea {
	color: #000;
    color: var(--text-color);
}

textarea {
	resize: none;
}


/* ==========================================================================
   Base Standard img / media declaration
   ========================================================================== */

embed,
object,
video,
iframe,
img,
svg {
    width: 100%;
}

img {
    height: auto;
}

.c-img-max-width,
.c-content .c-img-max-width {
	width: auto;
	max-width: 100%;
}

img { 
	vertical-align: bottom; 
}

/* ==========================================================================
  GRID 
   ========================================================================== */

/* ==========================================================================
  GRID Standard Main Container Declaration
   ========================================================================== */

.c-header,
.c-content,
.c-footer,
.c-container,
.c-container-wide {
    position: relative;
    width: 100%;
    z-index: auto;
}

/* ==========================================================================
  GRID  Standard Padding between Components 
   ========================================================================== */

.c-container {
	padding-bottom: 3em;
    padding-bottom: var(--spacing-l);
}

.c-container-no-padding {
	padding-bottom: 0;
}

.c-container-wide {
    padding-top: 3em;
    padding-top: var(--spacing-l);
}


/* ==========================================================================
   GRID Standard Grid Declaration
   ========================================================================== */

.c-container {
    padding-left: 20px;
    padding-right: 20px;
    padding-left: var(--grid-container);
    padding-right: var(--grid-container);
}

.c-row {
    margin-right: -10px;
    margin-left: -10px;
    margin-right: var(--grid-row);
    margin-left: var(--grid-row);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}

.c-row-reverse {
    flex-direction: row-reverse;
}

.c-row-justify-left {
    justify-content: flex-start;
}

.c-row-justify-center {
    justify-content: center;
}

.c-row-align-top {
    align-items: flex-start;
}

.c-row-align-center {
    align-items: center;
}

.c-row-align-bottom {
    align-items: flex-end;
}

.c-col-1,
.c-col-2,
.c-col-3,
.c-col-4,
.c-col-5,
.c-col-6,
.c-col-7,
.c-col-8,
.c-col-9,
.c-col-10,
.c-col-11,
.c-col-12 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
    padding-right: var(--grid-col);
    padding-left: var(--grid-col);
}

.c-col-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;    
}

.c-col-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
}

.c-col-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
}

.c-col-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}

.c-col-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
}

.c-col-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
}

.c-col-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.c-col-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
}

.c-col-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}

.c-col-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHY Base
   ========================================================================== */
html {
	font-size: 20px;
    font-size: var(--font-size-root);
}

/* ==========================================================================
   TYPOGRAPHY Titles
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
    font-weight: var(--font-weight-bold);
    text-wrap:balance;
}

h1,
.c-h1 {
	padding-bottom: .5em;
	line-height: 1.1;
	font-size: 4rem; /* 80px */
    font-size: var(--font-size-h1);
}

h2,
.c-h2 {
	padding-bottom: .5em;
	line-height: 1.2;
	font-size: 4rem; 
    font-size: var(--font-size-h2);
}

.c-h2-small {
    padding-bottom: 0;
    font-size: var(--font-size-h2-small);
}

h3,
.c-h3 {
	padding-bottom: 0.25em;
	line-height: 1.5;
	font-size: 1.4rem;
    font-size: var(--font-size-h3);
}

h4,
.c-h4 {
	padding-bottom: 0;
	line-height: 1.5;
	font-size: 1rem;
    font-size: var(--font-size-body);
}

/* ==========================================================================
   TYPOGRAPHY Basic Text Content
   ========================================================================== */

.c-content,
.c-footer {
	line-height: 1.5;
}

.c-text-block p {
	padding-bottom: 1.5em;
}

.c-text-block p:last-child {
	padding-bottom: 0;
}

.c-text-block p + h2,
.c-text-block p + h3,
.c-text-block p + h4,
.c-text-block ul + p,
.c-text-block ul + h2,
.c-text-block ul + h3,
.c-text-block ul + h4,
.c-text-block ul + ol,
.c-text-block ol + p,
.c-text-block ol + h2,
.c-text-block ol + h3,
.c-text-block ol + h4 {
	padding-top: 0.75em;
}

.c-lead {
    line-height: 1.33;
	font-size: 1.33rem;
    font-size: var(--font-size-lead);
    text-wrap:balance;
    padding-bottom: var(--spacing-m);
}

.c-text-small {
	font-size: 0.77rem; /* 14px */
    font-size: var(--font-size-body-s);
}

.c-countdown-number {
    line-height: 1;
	font-size: 4rem;
    font-size: var(--font-size-number);
    font-weight: bold;
    font-weight: var(--font-weight-bold);
    /* Force the number line to exact 1em height to kill Safari line-box inflation */
    height: 1em;
    min-height: 1em;
    position: relative;
    overflow: hidden;
}


/* ==========================================================================
   Quote
   ========================================================================== */

.c-text-block blockquote {
	margin: 0;
	padding: 0 0 1.5rem 0;
}

.c-text-block blockquote p {
	position: relative;
	padding: 0;
	line-height: 1.25;
	font-size: 1rem; /* 40px */
    font-size: var(--font-size-quote);
    font-weight: bold;
    font-weight: var(--font-weight-bold);
    text-wrap:balance;
}

.c-text-block blockquote p::before,
.c-text-block blockquote p::after {
	content: '';
	display: block;
	position: absolute;
	left: -40px;
	top: -5px;
    width: 30px;
    height: 30px;
    background-image:url(../images/heartsingle-2.svg);
	background-repeat: no-repeat;
    background-size: 30px;
    background-position: 0 0;    
	/*z-index: -1;*/
}

.c-text-block blockquote p::after {
	left: 95%;
	top: auto;
    bottom: 0;
    background-image:url(../images/heartsingle-1.svg);
    background-size: 20px;
    transform: rotate(10deg);
}



/* ==========================================================================
   Text helpers
   ========================================================================== */

.c-text-light {
	color: var(--text-color-light);
}

/* ==========================================================================
   Text sizes responsive
   ========================================================================== */

@media only screen and (max-width:1400px) {	    
    :root {
        --font-size-h1: 3rem; 
        --font-size-h2: 3rem; 
        --font-size-h2-small: 1.75rem; 
        --font-size-h3: 1.25rem;
        --font-size-lead: 1.25rem;
        --font-size-quote: 1.25rem;
        --font-size-number: 3rem; 
    }
}

@media only screen and (max-width:1100px) {	    
    :root {
        --font-size-root: 18px; 
    }
}

@media only screen and (max-width:980px) {	    
    :root {
        --font-size-h1: 2.75rem; 
        --font-size-h2: 2.75rem; 
        --font-size-number: 2.75rem;  
    }
}

@media only screen and (min-width:768px) {	    
    .c-countdown     {
        --font-size-body-s: 1rem; 
    }
}

@media only screen and (max-width:767px) {	    
    :root {
        --font-size-h1: 2rem; 
        --font-size-h2: 2rem; 
        --font-size-h2-small: 1.25rem; 
        --font-size-h3: 1.25rem;
        --font-size-lead: 1rem;
        --font-size-quote: 1.25rem;
        --font-size-number: 1.25rem;  
    }
    
    .c-programm-list dt     {
        --font-size-h3: 1rem; 
    }
}

    

/* ==========================================================================
   LINKS Button 
   ========================================================================== */

.c-btn,
.c-form-standard input[type="submit"]{
    display: inline-block;
    margin: 0;
	padding: 0.75em 40px 0.75em 40px;
	border: none;
    border-radius: 50px;
	background-color: #35326B;
    background-color: var(--color-highlight);
    line-height: 1;
    text-align: center;  
	font-weight: bold;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3);
	transition: all 0.2s ease-out;
	text-decoration: none;
}

.c-form-standard input[type="submit"]{
    display: block;
    width: 100%;
}

.c-btn,
.c-btn:visited,
.c-form-standard input[type="submit"] {
    color: var(--text-color-light);
}

.c-btn:hover, 
.c-btn:focus,
.c-form-standard input[type="submit"]:hover,
.c-form-standard input[type="submit"]:focus {
    color: var(--color-highlight);
	background-color: var(--color-pink);
	text-decoration: none;
    /*box-shadow: 0 10px 0px 0px rgba(53,50,107,1);*/
}



/* ==========================================================================
  LINKS links with icons
   ========================================================================== */

.c-link-extern {
	position: relative;
    display: inline-block;
    padding-left: 34px;
    font-weight: bold;
    font-weight: var(--font-weight-bold);
}

.c-link-extern::before {
	content:'';
	position: absolute;
	background-image:url(../images/link-extern.svg);
	background-repeat: no-repeat;
}

.c-link-extern::before {
	top: -0.18em;
	left: 0;
	width: 31px;
	height: 31px;
	background-position: 0 0;
}

.c-link-extern:hover::before,
.c-link-extern:focus::before {
	background-position: -50px 0;
}

/* ==========================================================================
   CONTENTELEMENTS deco
   ========================================================================== */

.c-deco {
    display: block;
    position: absolute;
}

.c-deco-heartgroup {
    width: 100px;
}

.c-deco-heartgroup-small {
    width: 50px;
}

.c-deco-heart-small {
    width: 30px;
}

.c-deco-matterhorn {
    bottom: -1px;
    left: 15%;
    width: 200px;
}


.c-countdown .c-deco-heartgroup {
    top: -20px;
    left: 12%;
}

.c-invitation .c-deco-heartgroup {
    top: -20px;
    right: 8%;
}

.c-travel .c-deco-heartgroup {
    top: -30px;
    left: 8%;
}

.c-programm .c-deco-heartgroup {
    width: 80px;
    top: -10px;
    left: 50%;
}

.c-illu-champagne .c-deco-heartgroup-small {
    top: 20px;
    right: 0;
}

.c-illu-champagne .c-deco-heart-small {
    top: -8px;
    left: -4px;
}

.c-info .c-deco-heartgroup {
    top: -24px;
    left: 15%;
}

.c-info .c-deco-group {
    bottom: 1.5em;
    left: 10%;
}

.c-info .c-deco-heartgroup-small {
    bottom: 0;
    left: 0;
}

.c-info .c-deco-heart-small {
    bottom: 2.5em;
    left: 60px;
}

.c-footer .c-deco-heartgroup {
    top: -24px;
    right: 10%;
}

.c-footer .c-deco-heartgroup2 {
    top: auto;
    right: auto;
    bottom: 1em;
    left: 5%;
}

.c-login .c-deco-heartgroup {
    top: 1em;
    right: 10%;
    z-index: 1;
}

.c-login .c-deco-heartgroup2 {
    top: auto;
    right: auto;
    bottom: 1em;
    left: 35%;
}

.c-deco-heartgroup,
.c-deco-heartgroup-small,
.c-deco-heart-small {
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0%, 100% {
      transform: scale(0.9); }
  50% {
      transform: scale(1); }
}

/* ==========================================================================
   CONTENTELEMENTS animation
   ========================================================================== */

.c-dog-anim {
    animation: dogjump 1.4s infinite;
}

@keyframes dogjump {
    0% { transform: translate(0,0); }
    25% { transform: translate(0,-10px); }
    50% { transform: translate(0,2px); }
    75% { transform: translate(0,-5px); }
    100% { transform: translate(0,0); }
}

.c-dog-shadow-anim {
    animation: dogshadow 1.4s infinite;
    transform-origin: bottom center;
}

@keyframes dogshadow {
    0% { transform: scaleX(1); }
    25% { transform: scaleX(0.95); }
    50% { transform: scaleX(1); }
    75% { transform: scaleX(0.97); }
    100% { transform: scaleX(1); }
}

.c-heart-anim-1 {
    top: -30px;
    left: 36%;
    width: 24px;
    transform-origin: bottom center;
    animation: moveheart1 3.8s infinite ease;
}

.c-heart-anim-2 {
    top: -20px;
    right: 38%;
    width: 24px;
    transform-origin: bottom center;
    animation: moveheart2 4.2s infinite ease;
}

.c-heart-size {
    display: block;
    animation: pulse 1.8s infinite;
}

@keyframes moveheart1 {
    0%, 100% {transform: rotate(0deg) translate(0,0); }
    60% {transform: rotate(-5deg) translate(0,-3px);}
}

@keyframes moveheart2 {
    0%, 100% {transform: rotate(0deg) translate(0,0); }
    40% {transform: rotate(5deg) translate(0,-2px);}
}



/* ==========================================================================
   CONTENTELEMENTS Showroom
   ========================================================================== */
.c-showroom {
    padding-top: 3em;
    padding-top: var(--spacing-m);
    color: var(--color-highlight);
    overflow: hidden;
}

.c-showroom,
.c-showroom-text {
    padding-bottom: 3em;
    padding-bottom: var(--spacing-l);
}

.c-showroom-bottom {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3em;
    height: calc(var(--spacing-l) * 2);
    background-color: var(--color-green);
    
}

.c-showroom-inner .c-row {
    align-items: flex-end;
}

.c-showroom-celebrate {
    max-width: 80%;
    margin-left: -4px;
    padding-bottom: 1.5em;
}

.c-showroom-matterhorn {
    position: absolute;
    bottom: calc(var(--spacing-l) * 1.95);
    right: 0;
    width: 65%;
}

.c-illu-couple {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

/* ==========================================================================
   CONTENTELEMENTS login
   ========================================================================== */
.c-login {
    padding-top: 3em;
    padding-top: var(--spacing-l);
}

/* ==========================================================================
   CONTENTELEMENTS Countdown
   ========================================================================== */
.c-countdown {
    background-color: var(--color-light);
}

.c-countdown-item,
.c-travel-item,
.c-info-item {
    position: relative;
    padding: 0.5em 0;
    text-align: center;
}

.c-countdown-item {
    color: var(--color-highlight);
}

/* Remove default paragraph margins and control spacing in countdown items */
.c-countdown-item p {
    margin: 0;
}
.c-countdown-item .c-text-small {
    margin-top: 0;
}

/* Stack number and label vertically with consistent centering */
.c-countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35em;
}

.c-countdown .c-col-3::before,
.c-travel .c-col-6:first-child::before,
.c-info .c-col-4::before {
    content:'';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--border-basic);
}

.c-countdown .c-col-3:last-child::before,
.c-info .c-col-4:last-child::before {
    background-color: transparent;
}

/* ==========================================================================
   CONTENTELEMENTS invitation
   ========================================================================== */
.c-invitation {
    background-color: var(--color-blue);
}

.c-invitation h2 {
    color: var(--color-highlight);
}

.c-invitation .c-row {
    justify-content: space-between;
}

.c-illu-dog {
    position: relative;
    padding-top: var(--spacing-m);
    margin-left: auto;
    margin-right: -4px;
    max-width: 70%;
}

/* ==========================================================================
   CONTENTELEMENTS travel
   ========================================================================== */

.c-travel {
    text-align: center;
    background-color: var(--color-green);
}

.c-travel-item {
    max-width: 400px;
    margin: 0 auto;
}

.c-travel h2,
.c-h3-travel {
    color: var(--color-green-dark);
}

.c-h3-travel {
    max-width: 840px;
    margin: 0 auto 0.75em auto;
}


/* ==========================================================================
   CONTENTELEMENTS programm
   ========================================================================== */
.c-programm{
    background-color: var(--color-lila);
}

.c-programm .c-row {
    align-items: flex-end;
}

.c-programm h2,
.c-programm-list dt {
    color: var(--color-pink);
}

.c-illu-champagne {
    position: relative;
    padding-bottom: var(--spacing-l);
    margin-left: auto;
    max-width: 70%;
}

.c-programm-list {
	margin: 0;
	padding: 0 0 1.5em 0;
	border-top: solid 1px #fff;
    border-color: var(--border-basic);
    overflow: hidden;
	display: flex;
	flex-flow: row wrap;
}


.c-programm-list dt,
.c-programm-list dd {
	margin: 0;
	padding: var(--spacing-s) 0;
	border-bottom: solid 1px #fff;
    border-color: var(--border-basic);
}

.c-programm-list dt {
	-webkit-box-flex: 0;
    -webkit-flex: 0 0 33%;
    -ms-flex: 0 0 33%;
    flex: 0 0 33%;
    max-width: 33%;
	padding-right: 20px;
	font-weight: bold;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h3);
}


.c-programm-list dd {
	-webkit-box-flex: 0;
    -webkit-flex: 0 0 66%;
    -ms-flex: 0 0 66%;
    flex: 0 0 66%;
    max-width: 66%;
}

/* ==========================================================================
   CONTENTELEMENTS info
   ========================================================================== */

.c-info {
    text-align: center;
    background-color: var(--color-pink);
}

.c-info h2 {
    color: var(--color-lila);
}

/* ==========================================================================
   Form open / close
   ========================================================================== */

.c-form-check {
  position: absolute;
  left: -9999px;

}

.c-form-container {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}


.c-form-check:checked ~ .c-form-container {
  max-height: 9999px;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);

}

.c-form-box {
    position: relative;
    margin: 0 0 10px 0;
    padding: 1.5em 32px 1em 32px;
    background-color: #fff;
    background-color: var(--color-light);
    border-radius: 50px;
    box-shadow: 0 10px 0px 0px rgba(143, 178, 214, 1);
}

/*.c-form-box:after {
	content: '';
	position: absolute;
	top: 0;
	left: 80px;
	width: 0;
	height: 0;
	border: 24px solid transparent;
	border-bottom-color: #ffffff;
	border-top: 0;
	border-left: 0;
	margin-left: -10px;
	margin-top: -24px;
}


.c-link-close {
	display: block;
    position: absolute;
    top: 24px;
    right: 32px;
    width: 40px;
    height: 40px;
    overflow: hidden;
    color: var(--color-highlight);
    cursor: pointer;
}

.c-link-close::before, 
.c-link-close::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -4px;
    height: 4px;
    width: 30px;
    background-color: var(--color-highlight);
    transition: all 0.5s;
}

.c-link-close:hover::before, 
.c-link-close:hover::after {
    background-color: var(--color-pink);
}

.c-link-close::before {
    transform: rotate(-45deg);
}

.c-link-close::after {
    transform: rotate(45deg);
}

.c-link-close:hover::before {
    transform: rotate(0deg);
}

.c-link-close:hover::after {
    transform: rotate(0deg);
}*/

/* ==========================================================================
   Footer
   ========================================================================== */
.c-footer {
    color: var(--color-lila);
}

.c-footer-celebrate {
    max-width: 65%;
    padding-bottom: 1.5em;
}

.c-illu-family {
    position: relative;
    max-width: 90%;
    margin-left: -8px;
}

/* ==========================================================================
   Form
   ========================================================================== */
/* safari form fix */
input,
input[type="text"],
input[type="email"],
textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
	-webkit-box-shadow: none;
}

/* remove chrome autofill yellow color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-transition-delay: 2000s;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.c-form-item {
	position: relative;
	width: 100%;
	padding-bottom: 1em;
    padding-bottom: var(--spacing-s);
}

/* ==========================================================================
   formfields
   ========================================================================== */

.c-form-standard input[type="text"],
.c-form-standard input[type="email"],
.c-form-standard input[type="password"],
.c-form-standard input[type="url"],
.c-form-standard input[type="date"],
.c-form-standard input[type="tel"],
.c-form-standard textarea {
	width: 100%;
	border: solid 2px #35326B;
    border-color: var(--border-form);
    border-radius: 10px;
	color: #000;
    color: var(--text-color);
	padding: 0.75em 10px;
	background-color: #fff;
    background-color: var(--color-light);
}

.c-form-standard input[type="text"]:focus,
.c-form-standard input[type="email"]:focus,
.c-form-standard input[type="password"]:focus,
.c-form-standard input[type="url"]:focus,
.c-form-standard input[type="date"]:focus,
.c-form-standard input[type="tel"]:focus,
.c-form-standard textarea:focus {
	border-color: var(--border-form-focus);
	outline: none;
}



.c-form-standard .c-form-label-text {
	display: block;
    padding-left: 4px;
	padding-bottom: 0.35em;
    font-size: var(--font-size-body-s);
}


/* ==========================================================================
   error
   ========================================================================== */

/* error */
.c-form-standard .c-form-error {
    display: block;
    padding-top: 0.5em;
	color: var(--form-error);
    font-size: var(--font-size-body-s);
}




/* ==========================================================================
   RESPONISVE Viewport
   ========================================================================== */

@-ms-viewport {
	width: device-width;
}

/* ==========================================================================
   RESPONISVE Mediaqueries
   ========================================================================== */

@media only screen and (min-width:1401px) {
	/* container max width */
	.c-container {
        max-width: 1320px;
        margin-left: auto;
		margin-right: auto;
    }
    
    .c-showroom-celebrate {
        max-width: 540px;
        margin-left: -10px;
    }

    .c-showroom-matterhorn {
        width: 1094px;
    }

    .c-illu-couple {
        max-width: 650px;
    }
}

@media only screen and (max-width:1300px) {  
    .c-text-block blockquote p {
        padding-top: 1.5em;
    }
    
    .c-text-block blockquote {
        padding-bottom: 3em;
    }
    
    .c-text-block blockquote p::before,
    .c-text-block blockquote p::after {
        left: 3%;
        top: -5px;
    }
    
    .c-text-block blockquote p::after {
        left: 62%;
        top: auto;
        bottom: -36px;
    }
}



@media only screen and (max-width:1100px) {  
    .c-deco-heartgroup {
        width: 70px;
    }

    .c-deco-heartgroup-small {
        width: 30px;
    }

    .c-deco-heart-small {
        width: 20px;
    }
    
    .c-programm .c-deco-heartgroup {
        width: 60px;
    }
    
    .c-deco-matterhorn {
      left: 10%;
      width: 150px;
    }
    
    .c-info .c-deco-heart-small {
      bottom: 2em;
      left: 40px;
    }
}

@media only screen and (max-width:900px) {  
    .c-invitation .c-col-7,
    .c-invitation .c-col-4,
    .c-programm .c-col-8,
    .c-programm .c-col-4,
    .c-info .c-col-4 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;  
	}
    
    .c-invitation .c-col-7 {
		padding-bottom: 3em;
	}
    
    .c-info-item {
        max-width: 600px;
        padding: 1.5em 0;
        margin: 0 auto;
    }
    
    .c-info .c-col-4:first-child .c-info-item {
        padding-top: 0;
    }
    
    .c-info .c-col-4::before {
        background: none;
    }
    
}

@media only screen and (min-width:540px) and (max-width:900px) {  
    .c-invitation .c-col-4 {
		display: flex;
        flex-flow: row wrap;
        align-items: flex-end;
	}
    
    .c-illu-dog,
    .c-illu-champagne {
        max-width: 180px;
    }
    
    .c-illu-champagne {
        margin-top: var(--spacing-m);
        max-width: 180px;
        padding-bottom: 0;
    }
}

@media only screen and (max-width:800px) {  
	.c-showroom .c-col-6,
    .c-footer-main .c-col-7,
    .c-footer-main .c-col-5 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;  
        text-align: center;
	}
    
    .c-illu-couple,
    .c-illu-family {
        max-width: 350px;
    }
    
    .c-illu-family {
        margin: 0 auto;
        padding-bottom: var(--spacing-l);
    }
    
    .c-showroom-celebrate,
    .c-footer-celebrate {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .c-showroom-matterhorn {
        width: auto;
        max-width: 600px;
    }
    
    .c-form-box {
        margin-left: auto;
        margin-right: auto;
        max-width: 500px;
        text-align: left;
    }
    
    .c-form-box:after {
        left: 50%;
    }
    
    .c-deco-matterhorn {
      left: 15%;
      width: 120px;
    }
    
    .c-footer {
        padding-bottom: 4rem;
    }
    
    .c-heart-anim-1,
    .c-heart-anim-2 {
        width: 18px;
    }
}

@media only screen and (max-width:600px) {  
    .c-travel .c-col-6 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;  
	}
    
    .c-travel-item {
        padding: 1.5em 0;
        margin: 0 auto;
    }
    
    .c-travel .c-col-6:first-child .c-travel-item {
        padding-top: 0;
    }
    
    .c-travel .c-col-6:first-child::before {
        background: none;
    }
    
    .c-deco-heartgroup {
        width: 60px;
    }
}


@media only screen and (max-width:540px) {  
	.c-illu-couple {
        max-width: 80%;
    }
    
    .c-showroom-celebrate,
    .c-footer-celebrate {
        max-width: 70%;
    }
    
    .c-showroom-matterhorn {
        max-width: none;
        width: 120%;
        right: 50%;
        margin-right: -60%;
    }
    
    .c-programm-list dt,
    .c-programm-list dd {
        -webkit-box-flex: 0;
		-webkit-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;  
        padding-right: 0;
    }
    
    .c-programm-list dt {
        padding-bottom: 0;
        border-bottom: none;
    }
    
    .c-programm-list dd {
        padding-top: 0.75em;
    }
    
    .c-illu-dog,
.c-illu-champagne {
        max-width: 180px;
    }
}

/* Countdown (rolling digits) styles - cross-browser safe */
.rb-counter-host {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  /* Ensure uniform digit widths on Safari */
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: 'tnum' 1;
  font-feature-settings: 'tnum' 1;
  -webkit-text-size-adjust: 100%;
  /* Prevent Safari from inflating line box based on transformed children */
  height: 1em;
  overflow: hidden;
}
.rb-counter {
  display: inline-flex;
  /* Avoid baseline quirks in Safari causing tall line boxes */
  align-items: center;
  white-space: nowrap;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  /* gap not supported on very old Safari; keep a margin fallback */
  gap: 0.12em;
}
.rb-digit {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  /* Fixed, safe width across browsers (undo dynamic measurement) */
  width: 0.70em;
  min-width: 0.70em;
  max-width: 0.70em;
  height: 1em;
  line-height: 1; /* avoid em rounding issues on Safari */
  overflow: hidden;
  text-align: center;
  letter-spacing: 0;
  box-sizing: content-box;
  contain: content; /* isolate layout/paint to avoid overflows */
  -webkit-font-smoothing: antialiased;
  font-kerning: none;
}
.rb-digit + .rb-digit { margin-left: 0.12em; }
.rb-numbers {
  display: inline-block;
  will-change: transform;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform var(--rb-duration, 420ms) cubic-bezier(.2,.6,.2,1);
}
.rb-number {
  display: block;
  height: 1em;
  line-height: 1; /* safer with height 1em */
}
.rb-no-transition {
  transition: none !important;
}
.rb-gradients { display: none; }

/* Optional GPU hint wrapper (JS adds .rb-gpu on Safari) */
.rb-gpu .rb-numbers {
  transform: translateZ(0) translateY(0);
}

/* Center seconds digits (4th column) – override to inline-block to avoid iOS flex quirks */
.c-countdown .c-row .c-col-3:last-child .c-countdown-number {
  display: inline-block;
  text-align: center;
}

/* Countdown row: avoid stretching columns to abnormal heights in Safari */
.c-countdown .c-row {
  align-items: center;
}

/* Make all countdown numbers inline-block to avoid iOS flex/line-box issues */
.c-countdown .c-countdown-number {
  display: inline-block;
  text-align: center;
}

/* iOS Safari specific containment – further reduce layout inflation */
@supports (-webkit-touch-callout: none) {
  .c-countdown .c-countdown-number {
    display: inline-block !important;
    contain: layout paint; /* isolate layout for the number line */
  }
}