/* = = = = = = = = = = = Datei format.css = = = = = = = = = = = */

/* ############################################################ */
/* CSS Einstellung von Thomas - Letzte Änderung 14.04.2023 V1.1 */
/* ############################################################ */

/* ############################################################ */
/* Kasten Designe .alertTB vom Freitag, den 14.04.2023          */
/* ############################################################ */


.schreibschrift{

font-family: oswald,sans-serif;

}

.myButton{
background-color:#274965d9;
color: #fff;
font-size:large;
border:#fff;
border-style:initial;
border-radius: 10px;
font-family:'Courier New', Courier, monospace !important;
}

.alertTB{

font-family:'Courier New', Courier, monospace; /* 14.04.2023 - IT Schriftart*/
margin-top: 1px;
padding-top: 21px;
padding-bottom: 21px;
text-align: center;
color: #fff;

border: white;
border-style: hidden;
background-color:#274965;
}

/* ############################################################ */
/* Pictures - SlideShow vom Sonntag  den 30.04.2023 */
/* ############################################################ */

.mySlides 
{

display:none;
height: 400px;
width: 395px;
  
}

.mySlides_charly{
display:none;
height: 555px;
width: 444px;
}

/* ############################################################ */
/* Pictures - Hexagons vom Dienstag, den 04.04.2023 */
/* ############################################################ */

.galleryHexagon {
    --s: 150px; /* control the size */
    --g: 10px;  /* control the gap */
    display: grid;
    margin: calc(var(--s) + var(--g));
  }
  
  .galleryHexagon > img {
    grid-area: 1/1;
    width: var(--s);
    aspect-ratio: 1.15;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%,75% 100%,25% 100%,0 50%);
    transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
    cursor: pointer;
    filter: grayscale(80%);
    transition: .2s linear;
  }
  .galleryHexagon > img:hover {
    filter: grayscale(0);
    z-index: 1;
    --_t: 1.2;
  }
  
  .galleryHexagon > img:nth-child(1) {--_y: calc(-100% - var(--g))}
  .galleryHexagon > img:nth-child(7) {--_y: calc( 100% + var(--g))}
  .galleryHexagon > img:nth-child(3),
  .galleryHexagon > img:nth-child(5) {--_x: calc(-75% - .87*var(--g))}
  .galleryHexagon > img:nth-child(4),
  .galleryHexagon > img:nth-child(6) {--_x: calc( 75% + .87*var(--g))}
  .galleryHexagon > img:nth-child(3),
  .galleryHexagon > img:nth-child(4) {--_y: calc(-50% - .5*var(--g))}
  .galleryHexagon > img:nth-child(5), 
  .galleryHexagon > img:nth-child(6) {--_y: calc( 50% + .5*var(--g))}
  
  
  /* ############################################################ */
  /* Pictures - Flimmstreifen vom Mittwoch, den 05.04.2023 */
  /* ############################################################ */
  .gallery {
    --s: 30px; /* Control the zig-zag size */
    --g: 5px; /* Control the gap */
    
    display: grid;
    height: 350px;
    grid-auto-flow: column;
    place-items: center;
  }
  .gallery > img {
    width: 0;
    min-width: calc(100% + var(--s));
    height: 0;
    min-height: 100%;
    object-fit: cover;
    --mask: 
    linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
    radial-gradient(var(--s),#000 98%,#0000) 50%/calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
    cursor: pointer;
    transition: .5s;
  }
  .gallery > img:nth-child(odd) {
    --mask: 
    radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000 ) calc(-1*(var(--s) + var(--g)))/ 100% calc(1.8*var(--s));
  }
  .gallery > img:hover {
    width: 15vw; 
  }
  .gallery > img:first-child {
    min-width: calc(100% + var(--s)/2);
    place-self: start;
    --mask: 
    radial-gradient(calc(var(--s) + var(--g)) at right,#0000 98%,#000) 50%/ 100% calc(1.8*var(--s));
  }
  .gallery > img:last-child {
    min-width: calc(100% + var(--s)/2);
    place-self: end;
  }
  .gallery > img:last-child:nth-child(odd) {
    --mask: 
    radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50%/ 100% calc(1.8*var(--s));
  }
  .gallery > img:last-child:nth-child(even) {
    --mask: 
    linear-gradient(to right,#0000 var(--s),#000 0),
    radial-gradient(var(--s),#000 98%,#0000) left/calc(2*var(--s)) calc(1.8*var(--s)) repeat-y;
  }



/* ############################################################ */
/* INDEX 1 - Infoseite Thomas */
/* ############################################################ */


#story{

text-align: center;
}

#photo{
    text-align: center;
}

/* ############################################################ */
/* Allgemeine CSS Einstellung (Schriftart, Background-Color)    */
/* ############################################################ */

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


html, body {

font-family:'Courier New', Courier, monospace !important; /* 14.04.2023 - IT Schriftart*/
text-align: center !important;
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:62.5%;
line-height:1.5;
font-weight:normal;
height:100%;
background-color: steelblue;

}

body {
text-align: center !important;
font-size:1.7rem;
margin: 0 auto;
background-color: steelblue;
}

/* Andere Zeilenabstände */
.content br {
line-height:.7;
}

p.break  {
text-align: center !important;
line-height:7rem;margin:0;
}


/* Überschriften */

h1, h2, h3, h4, h5 {
text-align: center;
color:white;
text-align:center;
letter-spacing:0px;
font-weight:normal;
text-transform:none;
}

h2 {
text-align: center !important;
font-size:2.5rem !important;
line-height: 3rem !important;
margin-top: -4rem !important;       /*Content mit (-) nach oben verschieben. */
margin-bottom: 1rem !important;     /*Content abstand zur (h2) Überschrift einstellen. */
}


h2:after {text-align:left;
text-align: center;
display: block;
width: 60px;
content: "";
margin: 8px 0 ;
}

h3 {
text-align: center;
font-size:2rem;
line-height: 2.3rem;
margin-top: 1rem;
margin-bottom:2.5rem;
letter-spacing:0rem;
}



/* Allgemeine links  */

a {background-color:transparent;
color:#152735 ;
text-decoration: underline;
}

a:hover  {color:#152735;
text-decoration:none;
}

/* Quelltext-Erklärungen - wenn vorhanden */
pre {white-space:pre-wrap;position:relative;
font-size:1.5rem;
padding:1rem 0.5rem 1rem 0.5rem;
margin:2rem auto;
text-align:center;
background:#fff;
color:#000;
border:dashed 1px #535353;
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
}

pre .extra {display:inline-block;position:absolute;left:0rem;top:1rem;font-size:2rem;
color:#4F4F4F;font-weight:bold;
transform:rotate(-45deg);
}


/* ############################################################ */
/*  Startseite Bilder Galerie */
/* ############################################################ */

.container_haupt {
margin:0 auto;
padding:0;
width:100%;
}

/* Bilder anpassen (Grösse).  */
/*
Wenn Sie eigene einzelne Bilder einbauen, unabhängig von unserem Bilderstystem,
dann werden diese Bilder maximal (max-width) so gross wie die Original-abmessungen des Bildes
bwz. des umschliessenden containers wenn vorhanden.
*/

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



/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM #1  - mit DISPLAY:INLINE-BLOCK */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */

.wrapper-box {display:block;
text-align:center;
padding:0rem;
}

.box {display:inline-block;
width:100%;
vertical-align:top;
margin:0 -.25rem 0 -.60rem ;/* Ausgleich ( minus-margin) für INLINE-BLOCK-WHITESPACE-BUG*/
}

.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3 ,
.box-1_of_4 ,
.box-1_of_5 ,
.box-1_of_6 
{width:100%;
}

.box img,
.box a img {display:block;
width: 100%;
box-shadow:0 0 0 4px steelblue;
}


/* ############################################################ */
/*  Startseite Meine Fotogalerie */
/* ############################################################ */

.gallery_container_a
{width:50%;
}

.gallery_container_b ,
.gallery_container_c
{width:25%;
}

.box-1_of_1_gallery {width:100%; }

.box-1_of_2_gallery {width:50%; }

.box-1_of_4_gallery {width:25%; }



/* ############################################################ */
/* Bereich Leiste */
/* ############################################################ */


.leiste-content {
width:100%;
margin:0 auto;
padding:0rem;
background-color: steelblue;
}



/* ############################################################ */
/* Bereich logo */
/* ############################################################ */

.section-logo {
width:100%;
background:steelblue;
overflow:hidden;
margin:0;
padding:0;
}

.logo-content {
width:100%;height:100%;
margin:0 auto;
}

/* === name === */

.name {display:block;
color:#fff;
font-size:2.6rem;
line-height:2.6rem;
text-align:center;
padding:.4rem;
text-transform:uppercase;
}

.name b {display:inline-block;
font-weight:normal;
color:#E8F0F7;
letter-spacing:2px;
font-size:1.4rem;
}

.f-letter{
color:#E8F0F7;
}

/* ############################################################ */
/* Menü und Icons - Homepage - Top und Bottom*/
/* ############################################################ */

#logo ul {
padding:0rem;
margin:0;
}

#logo li {list-style:none;display:inline;
padding:0rem;
margin:0;
}

#logo .fas ,
#logo .fab ,
#logo .far {display:inline-block;
background:transparent;
color:#fff;
font-size:2rem;
padding:0 1rem;
transition:all .5s ease-out;
}

#logo a:hover .fas ,
#logo a:hover .fab ,
#logo a:hover .far {
color:white;
text-shadow:0px 0px 1px #4F4F4F;
transform:scale(1.3)
}


/* ############################################################ */
/* GRID-SYSTEM #2  - Mit DISPLAY:TABLE ==> Titelbilder <==      */
/* ############################################################ */

#logo .wrapper-box-table {
display:table;
width:100%;height:100%;
padding:0;
background:transparent;
text-align:center;
}

#logo .box-tabcell-1a {height:100%;
display:table-cell;
width: 100%;
padding:3rem 0;
vertical-align:middle;
}

#logo .box-tabcell-1b  {
display:table-cell;display:none;
width: 100%;
padding:0rem;
vertical-align:middle;
text-align:right;
border-top-left-radius:36rem;
background-image:url(../images/welpenstall_003.jpg);
background-position:50% 50%;
background-repeat:no-repeat;
background-size:cover;
box-shadow:inset 1px 1px  3px black;
}

/* === Tabellenzelle-reihe === */
#logo .tabrow {display:table-row;
}

/* === Foto auf index1.html === */
#logo .box-tabcell-1b.back01 {
background-image:url(../images/mondeo_001.jpg);
}

/* === Foto auf index2.html === */
#logo .box-tabcell-1b.back02 {
background-image:url(../images/jack_001.jpg);
}

/* === Foto auf index3.html === */
#logo .box-tabcell-1b.back03 {
background-image:url(../images/special_24.jpg);
background-position-y:  -190px; /*Titelbild Höhe (-/= nach oben) verändern. */
}


/* === Foto auf index4.html === */
#logo .box-tabcell-1b.back04 {
background-image:url(../images/balu_004.jpg);
}

/* === Foto auf index5.html === */
#logo .box-tabcell-1b.back05 {
background-image:url(../images/charly_002.jpg);
}

/* === Foto auf index6.html === */
#logo .box-tabcell-1b.back06 {
background-image:url(../images/tossa_001.jpg);
}

/* === Foto auf index7.html === */
#logo .box-tabcell-1b.back07 {
background-image:url(../images/depot_001.jpg);
}
/* === Foto auf index8.html === */
#logo .box-tabcell-1b.back08 {
    background-image:url(../images/frank_001.jpg);
    }

  /* === Foto auf index9.html === */
  #logo .box-tabcell-1b.back09 {
      background-image:url(../images/ellie_001.jpg);
      }


/* ############################################################ */
/* Bereich Content */
/* ############################################################ */


.section-content {
text-align: center !important;
width:100%;
margin:0;
padding:0;
background:steelblue;
color:white ;
}

.content {
color: white;
text-align: center !important;
display:block;
width:100%;
min-height:60vh;
margin: 0 auto;
padding:6rem 3rem;
text-align:left;
}



/* ############################################################ */
/* Bereich Fusstop  */
/* ############################################################ */

.section-fusstop {
    width:100%;
}
   

.fusstop-content {
text-align:center;
margin: 0rem auto;
padding:1rem 0 ;
background-color: #152735; /* === Icons Bottom --> Background-color === */
}

/* === Menu und Icons === */

#fusstop ul {text-align:center;
padding:0rem;
margin:0;
}

#fusstop  li {list-style:none;display:inline;
padding:0rem .5rem;
margin:0;
}
*
#fusstop .fas ,
#fusstop .fab ,
#fusstop .far  {
display:inline-block;
font-size:1.8rem;
letter-spacing:0rem;
height:3rem;
width:3rem;
line-height:3rem;
margin: 0 auto;
color: #fff; /* === Color Icons Bottom === */ 
transition:all .3s ease-out;
}

#fusstop a:hover .fas ,
#fusstop a:hover .fab ,
#fusstop a:hover .far  {
color:#fff; /* === Background Color Leiste von Icons Bottom === */
background: #ffffff1c; /* === Hover Color Icons Bottom === */
}


/* ############################################################ */
/* Breich Fuss */
/* ############################################################ */

.section-fuss {
width:100%;
background:#274965;
color:#000;
}

.fuss-content {
text-align:center;
margin: 0rem auto;
padding:1rem 0 ;
}


/* === Fussname === */

.fussname {display:inline-block;
font-weight:normal;
color:#274965; /* NEU */
text-shadow:none;
margin:0 auto;
padding:0rem 0rem;
font-size:1.2rem;
letter-spacing:0.2rem;
text-transform:uppercase;
}

/* === Menü und Icons === */

#fuss ul {text-align:center;
padding:0rem;
margin:0;
}

#fuss  li {list-style:none;display:inline;
padding:0rem .2rem;
margin:0;
}

#fuss li a {display:inline-block;
text-decoration : none;
font-size:1.4rem;
letter-spacing:0rem;
padding:.2rem .4rem ;
margin: 0;
color:#D6E3EF;
}

#fuss li a:hover {background:transparent;
color:#fff;
}


/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN    */
/* ############################################################ */

/* ==================================== ab 320 pixel ================================== */

/* - - - - -  Nur zur Info - - - - - */
/*  Für die kleinste Smartphone-auflösung von 320pixel benötigen wir KEINE Bildschirmabragen 
(media queries), denn hierfür gilt ja automtisch der gesamte vorstehende Quelltext-Code.
Weil wir das Template ja 'mobile-first' angelegt haben. */


/* ==================================== bis 480 Pixel ================================== */
/* =================================== Handy Auflösung ================================ */
/* ===================================== 30.04.2023 =================================== */

@media (max-width: 480px) /* max-width = bis zu */ {

.content {padding:6rem 4rem; }

html, body 
{   
font-family:Arial, Helvetica, sans-serif;
}

.galleryHexagon {display: none;}

}




/* ==================================== ab 400 Pixel ================================== */

@media (min-width: 400px) {

/* Keine Angabe */



}


/* ==================================== ab 480 Pixel ================================== */

@media (min-width: 480px) {

/* Keine Angabe */



}


/* ==================================== ab 600 Pixel ================================== */
@media (min-width: 600px) {

.myPictureSlides {display:none;}

.logo-content {height:30rem; }
.content {padding:6rem 6rem; }

/* - - - - -   GRID-SYSTEM #1   - - - - - */
.box-1_of_1 {width: 50%; }
.box-1_of_2 {width: 50%; }
.box-1_of_3 {width: 33.33%; }
.box-1_of_4 {width: 50%; }
/* - - - - - ende  GRID-SYSTEM #1 - - - - - */


/* - - - - -  GRID-SYSTEM #2 - mit display:table/table-cell - - - - - */

#logo .box-tabcell-1a ,
#logo .box-tabcell-1b  {width: 50%; display:table-cell}
#logo .tabrow {display:none; }
/* - - - - - ende  GRID-SYSTEM #2  - - - - - */


}


/* ==================================== ab 640 Pixel ================================== */
@media (min-width: 640px) {

/* Keine angabe */


}


/* ==================================== ab 768 Pixel ================================== */
@media (min-width: 768px) {

html {font-size:70%;}

/* - - - - -   GRID-SYSTEM #1  - - - - - */
.box-1_of_2 {width: 50%;  }
.box-1_of_3 {width: 33.33%;  }
/* - - - - - Ende  GRID-SYSTEM #1  - - - - - */


}


/* ==================================== ab 800 Pixel ================================== */

@media (min-width: 800px) {

/* Keine angabe */


}


/* ===================================== ab 1024 Pixel ================================= */

@media (min-width: 1024px) {

.name {
font-size:3.6rem;
line-height:3.6rem;
}

.name b {
font-size:1.8rem;
}


/* - - - - -  GRID-SYSTEM #1   - - - - - */
.box-1_of_4 {width: 25%;  }
.box-1_of_5 {width: 20%;  }
.box-1_of_1_gallery {width: 100%;  }
.box-1_of_2_gallery {width: 50%;  }
/* - - - - - Ende  GRID-SYSTEM #1  - - - - - */


}


/* ===================================== ab 1100 Pixel ================================= */

@media (min-width: 1100px) {

html { font-size:75%; }

.content {padding:6rem 7rem; }

pre {width:50vw; }


}


/* ===================================== ab 1200 Pixel ================================= */

@media (min-width: 1200px) {

/* Einrücken der Bilder im Inhaltsbereich */
.content .wrapper-box {padding:0rem 5rem; }


}



/* ===================================== ab 1400 Pixel ================================= */

@media (min-width: 1400px) {

html { font-size:80%; }

.content {padding:6rem 9rem; }

}



/* +  +  +  +  + +  +  +  +  +  CSS CODE ENDE  +  +  +  +  +  +  +  +  +  + */