style und farben angepasst

frontend/assets/img/header-bg.jpg

@@ -1 +1 @@
-ring_am_strand.jpg
+bg_kc_holz.jpg

frontend/assets/img/kc.svg

@@ -7,41 +7,41 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:export-ydpi="300"
-   inkscape:export-xdpi="300"
-   inkscape:export-filename="/home/titzi/hochzeit/KC_font/KC_bw.png"
-   sodipodi:docname="kc.svg"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
-   id="svg24622"
-   version="1.1"
-   viewBox="0 0 44.045376 48.926971"
+   width="44.045376mm"
    height="48.926971mm"
-   width="44.045376mm">
+   viewBox="0 0 44.045376 48.926971"
+   version="1.1"
+   id="svg24622"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="kc.svg"
+   inkscape:export-filename="/home/titzi/hochzeit/KC_font/KC_bw.png"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300">
   <defs
      id="defs24616" />
   <sodipodi:namedview
-     fit-margin-bottom="0"
-     fit-margin-right="0"
-     fit-margin-left="0"
-     fit-margin-top="0"
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="6.6473412"
-     inkscape:cx="79.066074"
-     inkscape:cy="50.298522"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     inkscape:document-rotation="0"
-     showgrid="false"
-     inkscape:window-width="1918"
-     inkscape:window-height="1041"
-     inkscape:window-x="0"
+     inkscape:window-maximized="1"
      inkscape:window-y="1098"
-     inkscape:window-maximized="1" />
+     inkscape:window-x="0"
+     inkscape:window-height="1041"
+     inkscape:window-width="1918"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="mm"
+     inkscape:cy="76.883738"
+     inkscape:cx="118.68372"
+     inkscape:zoom="2.4280109"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
   <metadata
      id="metadata24619">
     <rdf:RDF>
@@ -55,28 +55,23 @@
     </rdf:RDF>
   </metadata>
   <g
-     transform="translate(-0.12986281,-0.0640909)"
-     inkscape:label="Layer 1"
+     id="layer1"
      inkscape:groupmode="layer"
-     id="layer1">
-    <g
-       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#f8ca76;fill-opacity:1;stroke:none;stroke-width:0.314431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
-       transform="matrix(2.3733249,0,0,2.3733249,-18.852063,-17.438882)"
-       id="g2382">
+     inkscape:label="Layer 1"
+     transform="translate(-0.12986281,-0.0640909)">
     <path
        inkscape:export-ydpi="300"
        inkscape:export-xdpi="300"
        inkscape:connector-curvature="0"
-         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:24.6944px;line-height:125%;font-family:Z003;-inkscape-font-specification:'Z003, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;font-variation-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;vector-effect:none;fill:#f8ca76;fill-opacity:1;stroke:none;stroke-width:0.314431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
-         d="m 22.597691,9.11927 c -0.36021,0.006 -0.72193,0.0384 -1.08676,0.0858 -3.4989,0.45435 -7.11627,2.10873 -9.462469,4.7439 -2.453301,2.75543 -4.869876,6.87594 -3.782716,10.40141 0.305056,0.98928 1.164328,1.77101 2.165244,2.28515 0.382476,-1.32434 0.715973,-2.50748 1.013891,-3.59669 -0.137139,-0.25665 -0.229055,-0.53025 -0.258381,-0.82061 -0.507008,-5.02001 5.468681,-10.98015 9.660391,-11.65304 1.36267,-0.21876 2.40997,-0.24651 3.21582,-0.12816 0.0879,-0.36288 0.19314,-0.75621 0.23875,-1.09554 -0.56735,-0.17195 -1.13356,-0.23148 -1.70377,-0.22222 z m 3.25768,1.00822 c -0.0605,0.2277 -0.12499,0.44768 -0.19172,0.66352 0.8734,0.1896 1.38583,0.20384 0.19172,-0.66352 z m -3.48971,12.74495 c -0.24747,-0.009 -0.82518,0.25715 -1.54306,0.68059 -2.9904,1.76379 -3.85023,2.11177 -5.84098,1.7172 -0.51915,-0.1029 -1.08531,-0.29266 -1.61903,-0.55605 -0.0498,0.32081 -0.10623,0.67646 -0.15296,0.96687 -0.09248,0.57475 -0.182981,1.07852 -0.287322,1.4728 -0.01781,0.0673 -0.03711,0.12086 -0.05529,0.18137 2.957312,0.30679 6.310302,-0.73321 8.410852,-2.81688 1.17818,-1.16872 1.40596,-1.63447 1.08779,-1.6459 z"
+       style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:24.6944px;line-height:125%;font-family:Z003;-inkscape-font-specification:'Z003, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;font-variation-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;vector-effect:none;fill:#f7ae70;fill-opacity:1;stroke:#000000;stroke-width:0.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
+       d="m 34.7796,4.2041086 c -0.854896,0.01424 -1.713375,0.091136 -2.579235,0.2036312 C 23.896339,5.48606 15.311144,9.4124413 9.7428519,15.666556 3.9203715,22.206086 -1.8149461,31.985395 0.7652378,40.352481 1.4892348,42.700364 3.5285664,44.555663 5.9040653,45.775885 6.8118051,42.632795 7.6033018,39.82482 8.3103581,37.239771 7.9848827,36.630657 7.7667361,35.981315 7.697136,35.292196 6.4938413,23.378082 20.676093,9.2327331 30.624382,7.6357465 33.858441,7.1165579 36.344024,7.0506982 38.256568,7.3315812 38.465183,6.470349 38.714952,5.5368492 38.823199,4.7315088 37.476694,4.3234156 36.132893,4.1821316 34.7796,4.2041086 Z m 7.731533,2.3928336 c -0.143586,0.5404061 -0.296642,1.0624901 -0.455014,1.5747485 2.072862,0.4499824 3.289025,0.4837786 0.455014,-1.5747485 z M 34.228917,36.844849 c -0.587327,-0.02136 -1.95842,0.610301 -3.662183,1.615262 -7.09719,4.186046 -9.137846,5.011916 -13.862543,4.075473 -1.232111,-0.244215 -2.575793,-0.694577 -3.842484,-1.319687 -0.118192,0.761386 -0.252118,1.605459 -0.363024,2.294696 -0.219485,1.364069 -0.434273,2.559679 -0.681908,3.495433 -0.04227,0.159725 -0.08807,0.28684 -0.131221,0.43045 7.018662,0.728113 14.976396,-1.740145 19.961684,-6.685371 2.796204,-2.773752 3.3368,-3.879129 2.581679,-3.906256 z"
        id="path3741-3-7-8-9-0" />
     <path
        inkscape:export-ydpi="300"
        inkscape:export-xdpi="300"
-         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:24.6944px;line-height:125%;font-family:Z003;-inkscape-font-specification:'Z003, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;font-variation-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;vector-effect:none;fill:#f8ca76;fill-opacity:1;stroke:none;stroke-width:0.314431px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
-         d="m 24.891091,7.37518 c -0.71115,0.0199 -1.3421,0.94454 -0.92242,0.9891 0.8436,0.0896 0.43541,1.29294 0.22582,2.17971 -1.03737,4.38894 -8.62419,7.59026 -9.71052,7.52512 l 0.88883,-4.23486 c -0.34692,0.32697 -0.68344,0.67042 -1.00303,1.03042 -0.42264,0.47603 -0.81428,0.97858 -1.16996,1.49706 -0.579926,3.0408 -1.389125,6.07573 -2.785357,10.88565 -0.293979,1.01272 1.875898,0.73128 2.011246,0.62529 0.537416,-0.4209 0.721799,-3.43768 1.291391,-6.15053 0,0 1.52743,2.2625 3.03961,3.50829 0.23706,-0.0301 0.47431,-0.0799 0.72451,-0.15708 0.42279,-0.13047 0.88971,-0.33843 1.44539,-0.62788 -0.38625,-0.19265 -0.72939,-0.38513 -0.98237,-0.55759 -2.06584,-1.40827 -2.58279,-3.99769 -2.58279,-3.99769 7.16053,-3.45131 9.3472,-5.47717 10.49807,-10.40866 0.11591,-0.49673 0.14013,-1.74543 -0.66146,-2.05414 -0.10205,-0.0393 -0.20537,-0.055 -0.30696,-0.0522 z m -9.63456,1.93064 c -0.30711,0 -0.61584,0.0285 -1.05885,0.0894 -0.10637,0.96689 -0.21376,1.84456 -0.32349,2.68615 0.67109,-0.4999 1.39235,-0.94147 2.14561,-1.32707 l 0.28525,-1.35908 c -0.43601,-0.0587 -0.74141,-0.0888 -1.04852,-0.0894 z m 10.03505,15.77528 c -0.37599,-0.0552 -0.96401,0.49797 -1.71565,0.54777 -0.80526,0.0966 -1.83821,-0.10941 -2.82671,-0.43357 -0.57947,0.47101 -1.22413,0.8759 -1.91151,1.20975 2.00003,0.91697 3.52078,1.33739 4.7594,1.33842 0.63327,0 2.21145,-0.75819 2.13166,-1.66658 -0.0624,-0.71075 -0.21159,-0.96272 -0.43719,-0.99579 z"
+       style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:24.6944px;line-height:125%;font-family:Z003;-inkscape-font-specification:'Z003, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;font-variation-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;vector-effect:none;fill:#f7bd73;fill-opacity:1;stroke:#000000;stroke-width:0.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000"
+       d="M 40.222583,0.06481634 C 38.534793,0.1120455 37.037344,2.3065166 38.033381,2.412272 40.035518,2.6249219 39.06675,5.4808387 38.569325,7.585432 36.107309,18.001813 18.10132,25.599585 15.523106,25.444987 l 2.109482,-10.050699 c -0.823353,0.776006 -1.622025,1.591124 -2.380516,2.445521 -1.003062,1.129774 -1.932551,2.322489 -2.776695,3.55301 -1.376353,7.216807 -3.2968448,14.419682 -6.610557,25.835184 -0.6977077,2.403514 4.452115,1.735565 4.77334,1.484017 1.275463,-0.998933 1.713064,-8.158732 3.064891,-14.597206 0,0 3.625087,5.369647 7.213982,8.326312 0.56262,-0.07144 1.125691,-0.189629 1.719497,-0.372802 1.003418,-0.309648 2.111571,-0.803204 3.43038,-1.490163 -0.916696,-0.457221 -1.731079,-0.914039 -2.331483,-1.323343 -4.902909,-3.342282 -6.1298,-9.487817 -6.1298,-9.487817 C 34.599892,21.575921 39.78957,16.767897 42.520958,5.0638692 42.79605,3.8849676 42.853532,0.92139676 40.951099,0.18872763 40.708901,0.09545596 40.463689,0.05819476 40.222583,0.06484007 Z M 17.356642,4.6468523 c -0.728872,0 -1.461588,0.06764 -2.512995,0.2121753 -0.252451,2.2947441 -0.507322,4.3777401 -0.767747,6.3751064 1.592715,-1.186425 3.304499,-2.2344139 5.09223,-3.149568 L 19.845121,4.8590276 C 18.810327,4.7197134 18.085514,4.6482763 17.356642,4.6468523 Z M 41.173076,42.086717 c -0.892346,-0.131007 -2.287909,1.181845 -4.071795,1.300036 -1.911144,0.229264 -4.362669,-0.259665 -6.708701,-1.029002 -1.375271,1.11786 -2.905258,2.078795 -4.536634,2.87113 4.746721,2.176267 8.355954,3.174061 11.295602,3.176505 1.502956,0 5.248489,-1.799431 5.059122,-3.955336 -0.148096,-1.68684 -0.502172,-2.284847 -1.037594,-2.363333 z"
        id="path3792-0"
        inkscape:connector-curvature="0" />
   </g>
-  </g>
 </svg>

frontend/css/styles.css

@@ -64,7 +64,8 @@ body {
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #212529;
+  /* color: #212529; */
+  color: #3e0006 ;
   text-align: left;
   background-color: #fff;
 }
@@ -159,12 +160,15 @@ sup {
 }
 
 a {
-  color: #fed136;
+    /* color: #fed136; */
+    /* color: #f7ae70; */
+    color: #6c757d;
   text-decoration: none;
   background-color: transparent;
 }
 a:hover {
-  color: #e6b301;
+  /* color: #e6b301; */
+  color: #f7bd73;
   text-decoration: underline;
 }
 
@@ -360,8 +364,8 @@ template {
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   margin-bottom: 0.5rem;
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-weight: 700;
+  font-family: "Pacifico", cursive;
+  font-weight: 600;
   line-height: 1.2;
 }
 
@@ -2475,18 +2479,22 @@ fieldset:disabled a.btn {
 
 .btn-primary {
   color: #fff;
-  background-color: #fed136;
-  border-color: #fed136;
+  /* background-color: #fed136; */
+  /* border-color: #fed136; */
+  background-color: #f7bd73ff;
+  border-color: #f7bd73ff;
+  font-family: 'Pacifico', cursive;
+  color: #3e0006ff
 }
 .btn-primary:hover {
-  color: #fff;
-  background-color: #fec810;
-  border-color: #fec503;
+    color: #6c757d;
+  background-color: #f7ae70ff;
+  border-color: #f7ae70ff;
 }
 .btn-primary:focus, .btn-primary.focus {
   color: #fff;
-  background-color: #fec810;
-  border-color: #fec503;
+  background-color: #f7ae70ff;
+  border-color: #f7ae70ff;
   box-shadow: 0 0 0 0.2rem rgba(254, 216, 84, 0.5);
 }
 .btn-primary.disabled, .btn-primary:disabled {
@@ -6162,6 +6170,10 @@ button.bg-danger:focus {
     background-color: #f8f9fa !important;
 }
 
+.bg-light-transparent {
+  background-color: #f8f9fa80 !important;
+}
+
 a.bg-light:hover, a.bg-light:focus,
 button.bg-light:hover,
 button.bg-light:focus {
@@ -6169,7 +6181,7 @@ button.bg-light:focus {
 }
 
 .bg-dark {
-  background-color: #343a40 !important;
+  background-color: #3e0006 !important;
 }
 
 a.bg-dark:hover, a.bg-dark:focus,
@@ -9801,11 +9813,11 @@ button.bg-dark:focus {
 }
 
 .text-primary {
-  color: #fed136 !important;
+    color: #f7bd73ff !important;
 }
 
 a.text-primary:hover, a.text-primary:focus {
-  color: #e6b301 !important;
+    color: #f7ae70ff !important;
 }
 
 .text-secondary {
@@ -10014,7 +10026,7 @@ p {
   padding: 6rem 0;
 }
 .page-section h2.section-heading {
-  font-size: 2.5rem;
+  font-size: 3.5rem;
   margin-top: 0;
   margin-bottom: 1rem;
 }
@@ -10055,9 +10067,9 @@ img::-moz-selection {
 
 .btn-xl {
   padding: 1.25rem 2.5rem;
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 1.125rem;
-  font-weight: 700;
+  font-family: "Pacifico", cursive;
+  font-size: 1.75rem;
+  font-weight: 300;
 }
 
 .btn-social {
@@ -10123,7 +10135,7 @@ img::-moz-selection {
   #mainNav.navbar-shrink {
     padding-top: 1rem;
     padding-bottom: 1rem;
-    background-color: #212529;
+    background-color: #3e0006;
   }
   #mainNav.navbar-shrink .navbar-brand {
     font-size: 1.25em;
@@ -10152,10 +10164,11 @@ header.masthead {
 }
 header.masthead .masthead-subheading {
   font-size: 1.5rem;
-  font-style: italic;
+  /* font-style: italic; */
   line-height: 1.5rem;
   margin-bottom: 25px;
-  font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* font-family: "Droid Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
+  font-family: 'Pacifico', cursive;
 }
 header.masthead .masthead-heading {
   font-size: 3.25rem;
@@ -10163,6 +10176,7 @@ header.masthead .masthead-heading {
   line-height: 3.25rem;
   margin-bottom: 2rem;
   font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* font-family: "Pacifico", cursive; */
 }
 
 @media (min-width: 768px) {
@@ -10171,8 +10185,8 @@ header.masthead .masthead-heading {
     padding-bottom: 12.5rem;
   }
   header.masthead .masthead-subheading {
-    font-size: 2.25rem;
-    font-style: italic;
+    font-size: 3.5rem;
+    /* font-style: italic; */
     line-height: 2.25rem;
     margin-bottom: 2rem;
   }
@@ -10217,9 +10231,9 @@ header.masthead .masthead-heading {
   background-color: #fff;
 }
 #portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
-  font-size: 1.5rem;
-  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-weight: 700;
+  font-size: 1.75rem;
+  font-family: "Pacifico", cursive;
+  font-weight: 300;
   margin-bottom: 0;
 }
 #portfolio .portfolio-item .portfolio-caption .portfolio-caption-subheading {
@@ -10515,3 +10529,19 @@ div.hline {
     background: #fed136;
     background: radial-gradient(#fed136 40%, rgba(254, 209, 54, 0) 80%);
 }
+
+.bg-wood {
+    background-image: url("../assets/img/holz_strucktur.jpg");
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: center center;
+    background-size: cover;
+}
+
+.bg-wood-color {
+    background-image: url("../assets/img/bg_holz_bunt_senkrecht.jpg");
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-position: center center;
+    background-size: cover;
+}

frontend/index.html

@@ -13,6 +13,7 @@
         <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
         <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
         <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />
+        <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet" type="text/css" />
         <!-- Core theme CSS (includes Bootstrap)-->
         <link href="css/styles.css" rel="stylesheet" />
     </head>
@@ -50,10 +51,10 @@
         </header>
 
         <!-- Einladung -->
-        <section class="page-section " id="einladung">
+        <section class="page-section bg-wood" id="einladung">
             <div class="container">
                 <div class="text-center">
-                    <h2 class="section-heading text-uppercase">CK laden Dich/Euch ein</h2>
+                    <h2 class="section-heading ">CKris laden Euch ein</h2>
                     <!-- <h3 class="section-subheading text-muted">Wir würden geren unsere Hochzeit zusammen mit euch feiernc!<\b> -->
                     <h3 class="section-subheading text-muted">Um diesen wunderbaren Anlass zu feiern, laden wir Dich/Euch herzlich am 10.10.2020 ein
                         <!-- Daher laden wir euch herzlich am 10.10.2020 ein zur ... -->
@@ -86,7 +87,7 @@
                     </div>
                 </div>
                 <div class="text-center my-5">
-                <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#anmelden">wir sind dabei!</a>
+                <a class="btn btn-primary btn-xl js-scroll-trigger" href="#anmelden">wir sind dabei!</a>
                 </div>
             </div>
         </section>
@@ -95,8 +96,8 @@
         <section class="page-section bg-dark" id="anmelden">
             <div class="container">
                 <div class="text-center">
-                    <h2 class="section-heading text-uppercase text-white">Rückmelde Formular</h2>
-                    <h3 class="section-subheading text-muted">
+                    <h2 class="section-heading  text-white">Rückmelde Formular</h2>
+                    <h3 class="section-subheading text-white">
                         Bitte gebt uns bescheid, ob ihr kommen könnt oder verhindert seid.<br/>
                         Außerdem helft ihr uns bei der Planung, wenn ihr uns noch ein paar Zusatzinformationen gebt.
                     </h3>
@@ -171,7 +172,7 @@
                                             <input type="checkbox" name="vegi" id="vegi">
                                         </div>
                                     </div>
-                                    <input class="form-control" id="numVegi" name="numVegi" type="number" placeholder="Anzahl" />
+                                    <input class="form-control" id="numVegi" name="numVegi" type="number" min="0" placeholder="Anzahl" />
                                 </div>
 
 
@@ -182,7 +183,7 @@
                                             <input type="checkbox" id="vegan" name="vegan">
                                         </div>
                                     </div>
-                                    <input class="form-control" id="numVegan" name="numVegan" type="number" placeholder="Anzahl" />
+                                    <input class="form-control" id="numVegan" name="numVegan" type="number" min="0" placeholder="Anzahl" />
                                 </div>
 
                                 <label class="text-white mb-0" for="alagen">Allergien und Unverträglichkeiten</label>
@@ -213,7 +214,7 @@
                                             <input type="checkbox" id="unterkunft" name="unterkunft">
                                         </div>
                                     </div>
-                                    <input class="form-control" id="numUnterkunft" name="numUnterkunft" type="number" placeholder="Anzahl der Zimmer" />
+                                    <input class="form-control" id="numUnterkunft" name="numUnterkunft" type="number" min="0" placeholder="Anzahl der Zimmer" />
                                 </div>
 
                                 <div>
@@ -274,7 +275,7 @@
                     </div>
 
                     <div class="text-center">
-                        <button class="btn btn-primary btn-xl text-uppercase" id="sendMessageButton" type="submit">Übermittle Daten</button>
+                        <button class="btn btn-primary btn-xl " id="sendMessageButton" type="submit">Daten übermitteln</button>
                         <div id="form_message"></div>
                     </div>
                 </form>
@@ -287,7 +288,7 @@
         <section class="page-section" id="ablauf">
             <div class="container">
                 <div class="text-center">
-                    <h2 class="section-heading text-uppercase">Ablauf</h2>
+                    <h2 class="section-heading">Ablauf</h2>
                     <h3 class="section-subheading text-muted">So planen wir mit euch zu feiern.</h3>
                 </div>
                 <ul class="timeline">
@@ -364,10 +365,10 @@
         </section>
 
         <!-- Kontakt -->
-        <section class="page-section bg-light" id="kontakt">
+        <section class="page-section bg-wood" id="kontakt">
             <div class="container">
                 <div class="text-center">
-                    <h2 class="section-heading text-uppercase">Schreibt uns!</h2>
+                    <h2 class="section-heading ">Schreibt uns!</h2>
                     <h3 class="section-subheading text-muted">Ihr habt noch Fragen oder wollt uns einfach noch was sagen?</h3>
                 </div>
                 <div class="row">
@@ -385,9 +386,9 @@
                             <h4>Krisi & Chris</h4>
                             <p class="text-muted">Brautpaar</p>
                             <!-- <p class="text-muted" href="mailto:hochzeit@ckris.de" >hochzeit@ckris.de</p> -->
-                            <a class="btn btn-dark btn-social mx-2" href="mailto:hochzeit@ckris.de"><i class="fa fa-envelope"></i></a>
-                            <a class="btn btn-dark btn-social mx-2" href="https://t.me/titzi1990"><i class="fab fa-telegram"></i></a>
-                            <a class="btn btn-dark btn-social mx-2" href="https://t.me/Krisi1001"><i class="fab fa-telegram"></i></a>
+                            <a class="btn btn-dark btn-social mx-2" href="mailto:hochzeit@ckris.de" target="_blank"><i class="fa fa-envelope"></i></a>
+                            <a class="btn btn-dark btn-social mx-2" href="https://t.me/titzi1990" target="_blank"><i class="fab fa-telegram"></i></a>
+                            <a class="btn btn-dark btn-social mx-2" href="https://t.me/Krisi1001" target="_blank"><i class="fab fa-telegram"></i></a>
                         </div>
                     </div>
                     <div class="col-lg-4">
@@ -410,7 +411,7 @@
         <section class="page-section" id="portfolio">
             <div class="container">
                 <div class="text-center">
-                    <h2 class="section-heading text-uppercase">weitere Informationen</h2>
+                    <h2 class="section-heading ">weitere Informationen</h2>
                     <h3 class="section-subheading text-muted">Alles was ihr vor unserer Hochzeit noch wissen solltet.</h3>
                 </div>
                 <div class="row">
@@ -516,14 +517,14 @@
         <!-- Info Dresscode-->
         <div class="portfolio-modal modal fade col-lg-8" id="infoDresscode" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
-                <div class="modal-content">
+                <div class="modal-content bg-wood-color">
                     <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
-                                <div class="modal-body bg-light">
+                                <div class="modla-body bg-light-transparent">
                                     <!-- Project Details Go Here-->
-                                    <h2 class="text-uppercase">Was soll ich nur anziehen?</h2>
+                                    <h2 class="">Was soll ich nur anziehen?</h2>
                                     <p class="item-intro text-muted">Mancher Gast der mag sich fragen, was soll ich an diesem Tage tragen.<br />
                                         Es soll ein schickes Feste sein, dann kleidet euch entsprechend ein.</p>
                                     <!-- Bildquelle: pexels https://www.pexels.com/de-de/foto/anzuge-bunt-business-designeranzuge-6805/ -->
@@ -544,22 +545,22 @@
         <!-- Info Geschenk-->
         <div class="portfolio-modal modal fade col-lg-8" id="infoGeschenk" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
-                <div class="modal-content">
+                <div class="modal-content bg-wood-color">
                     <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
-                                <div class="modal-body bg-light">
+                                <div class="modla-body bg-light-transparent">
                                     <!-- Project Details Go Here-->
                                     <!-- <h2 class="text-uppercase">Geschenketisch</h2> -->
-                                    <h2 class="text-uppercase">Wie könnt ihr uns eine Freude machne?</h2>
+                                    <h2 class="">Wie könnt ihr uns eine Freude machen?</h2>
                                     <p class="item-intro text-muted">So mancher Gast wird sich wohl denken: "Was sollen wir dem Brautpaar schenken?"<br />
                                         Am liebsten wäre uns fürwahr, nebst guten Wünschen eine Kleinigkeit in bar.</p>
                                     <!-- <p class="item-intro text-muted">Wie können wir euch eine Freude machen?</p> -->
                                     <!-- Bildqulle: pexels https://www.pexels.com/de-de/foto/bluhen-blumen-blute-box-2072169/ -->
                                     <img class="img-fluid d-block mx-auto" src="assets/img/info/geschenk.jpeg" alt="" />
                                     <p>Für unsere Flitterwochen in Tansania freuen wir uns über einen finanziellen Zuschuss in unsere Reisekasse.</p>
-                                    <p>Für den Fall, dass euch Scheine und Münzen zu unpersönlich sind, führen unser Trauzeugen eine kleine Geschenkeliste.
+                                    <p>Für den Fall, dass euch Scheine und Münzen zu unpersönlich sind, führen unsere Trauzeugen eine kleine Geschenkeliste.
                                         Bitte erkundigt euch in so einem Fall bei ihnen, wie ihr uns eine Freude machen könnt.</p>
                                     <!-- TODO alternativ trauzeugen ein kleine liste geben? -->
                                     <button class="btn btn-primary" data-dismiss="modal" type="button">
@@ -577,14 +578,14 @@
         <!-- Info Anfarts Skitze -->
         <div class="portfolio-modal modal fade col-lg-8" id="infoAnfahrt" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
-                <div class="modal-content">
+                <div class="modal-content bg-wood-color">
                     <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
-                                <div class="modal-body bg-light">
+                                <div class="modla-body bg-light-transparent">
                                     <!-- Project Details Go Here-->
-                                    <h2 class="text-uppercase">Wo muss ich hin?</h2>
+                                    <h2 class="">Wo muss ich hin?</h2>
                                     <p class="item-intro text-muted">Unsere Trauung wird in der St. Jakobuskirche in Kirchrüsselbach stattfinden.</p>
                                     <iframe class="d-block mx-auto map-fluid"  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d165457.93912456147!2d11.2669754!3d49.6113201!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe17de36b38c8cf20!2sEv.%20Pfarramt%20Kirchr%C3%BCsselbach!5e0!3m2!1sde!2sde!4v1594547048952!5m2!1sde!2sde" tabindex="0" aria-hidden="false" allowfullscreen="" width="600" height="450" frameborder="0" style="border:0;"></iframe>
                                     <ul class="list-inline my-3">
@@ -610,14 +611,14 @@
         <!-- Info Convoi -->
         <div class="portfolio-modal modal fade col-lg-8" id="infoConvoi" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
-                <div class="modal-content">
+                <div class="modal-content bg-wood-color">
                     <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
-                                <div class="modal-body bg-light">
+                                <div class="modla-body bg-light-transparent">
                                     <!-- Project Details Go Here-->
-                                    <h2 class="text-uppercase">Wie kommen wir zur Gastwirtschaft?</h2>
+                                    <h2 class="">Wie kommen wir zur Gastwirtschaft?</h2>
                                     <p class="item-intro text-muted">Nach der Kirche fahren wir gemeinsam im Konvoi zur Gastwirtschaft "Roter Ochse".</p>
                                     <iframe class="d-block mx-auto map-fluid" src="https://www.google.com/maps/embed?pb=!1m32!1m12!1m3!1d82773.47313477186!2d11.130958235149492!3d49.585093969070414!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m17!3e0!4m5!1s0x47a1e5c1a5f19139%3A0xe17de36b38c8cf20!2sEv.%20Pfarramt%20Kirchr%C3%BCsselbach%2C%20St.-Jakobus-Stra%C3%9Fe%202%2C%2091338%20Igensdorf!3m2!1d49.61119!2d11.26724!4m3!3m2!1d49.5873077!2d11.1856584!4m5!1s0x47a1fca2211d242f%3A0x9a6762c5c10c2459!2sZum%20Roten%20Ochsen%2C%20Wei%C3%9Fgasse%2010-12%2C%2090562%20Kalchreuth!3m2!1d49.5589101!2d11.1347962!5e0!3m2!1sde!2sde!4v1594581003996!5m2!1sde!2sde" tabindex="0" aria-hidden="false" allowfullscreen="" width="600" height="450" frameborder="0" style="border:0;"></iframe>
                                     <a href="https://www.google.com/maps/dir/?api=1&travelmode=driving&layer=traffic&destination=Zum+Roten+Ochsen,+Wei%C3%9Fgasse+10-12,+90562+Kalchreuth" target="_blank">
@@ -645,14 +646,14 @@
         <!-- Modal 5-->
         <div class="portfolio-modal modal fade col-lg-8" id="infoUnterkunft" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog">
-                <div class="modal-content">
+                <div class="modal-content bg-wood-color">
                     <div class="close-modal" data-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div>
                     <div class="container">
                         <div class="row justify-content-center">
                             <div class="col-lg-8">
-                                <div class="modal-body bg-light">
+                                <div class="modal-body bg-light-transparent">
                                     <!-- Project Details Go Here-->
-                                    <h2 class="text-uppercase">Wir brauchen noch eine Unterkunft!</h2>
+                                    <h2 class="">Wir brauchen noch eine Unterkunft!</h2>
                                     <p class="item-intro text-muted">Wir empfehlen euch, an unser Partylocation in der Gastwirtschaft zum Roten Ochsen, ein Zimmer zu buchen.</p>
                                     <img class="img-fluid d-block mx-auto" src="assets/img/info/hotell.jpg" alt="" />
                                     <p> Die Gastwirtschaft zum Roten Ochsen, in der wir feiern werden, bietet auch <a href="https://www.roter-ochse-kalchreuth.de/hotel" target="_blank">Hotelzimmer</a> an.

frontend/js/form.js

@@ -37,8 +37,8 @@ $(function () {
                     $("#form_next").html("<div class='my-5 text-center'>");
                     $("#form_next > .text-center")
                         .html(
-                            "<a class='btn btn-primary btn-xl text-uppercase js-scroll-trigger'" +
-                                "href='#ablauf'>Das erwartet uns am 10.10."
+                            "<a class='btn btn-primary btn-xl js-scroll-trigger'" +
+                                "href='#ablauf'>Das erwartet uns ..."
                         )
                         .append("</a>");
                     $("#form_next > .text-center")