/* CSS by Phil Hoffer */

/* === fonts === */

@font-face
{
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/barlow-condensed-v12-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/barlow-condensed-v12-latin-500italic.woff') format('woff');   /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face
{
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/barlow-condensed-v12-latin-600italic.woff2') format('woff2'),
       url('fonts/barlow-condensed-v12-latin-600italic.woff') format('woff');
}

@font-face
{
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-mono-v22-latin-400.woff2') format('woff2'),
       url('fonts/roboto-mono-v22-latin-400.woff') format('woff');
}

@font-face
{
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/roboto-mono-v22-latin-600.woff2') format('woff2'),
       url('fonts/roboto-mono-v22-latin-600.woff') format('woff');
}

@font-face
{
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-400.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-400.woff') format('woff');
}

@font-face
{
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v34-latin-400italic.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-400italic.woff') format('woff');
}

@font-face
{
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/open-sans-v34-latin-500.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-500.woff') format('woff');
}

@font-face
{
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/open-sans-v34-latin-500italic.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-500italic.woff') format('woff');
}

@font-face
{
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v34-latin-600.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-600.woff') format('woff');
}

@font-face
{
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v34-latin-600italic.woff2') format('woff2'),
       url('fonts/open-sans-v34-latin-600italic.woff') format('woff');
}



/* === variables  === */

:root
{
--maxwidth:           1110px;

--textcolormain:      #292c2c;
--textcolormedium:    #505353;
--textcolorlight:     #737676;
--textcolorwhite:     #fff;
--textcolornav:       #505353;

--textcolorbright:    #fff;
--texcolorhighlight:  #222;

--background:         #d7dada;
--backgrounddarker:   #d6d9d9;
--backgroundbright:   #fff;

--backgroundmodal:    #f1f4f4;

--backgroundnav:      rgba(255,255,255,0.75);
--backgroundnavhover: rgba(255,255,255,0.95);

--backgroundalttext:  linear-gradient(to bottom, rgba(240,255,255,0.92), rgba(240,255,255,0.65));
--backgroundrow:      rgba(0,0,0,0.1);

--button:             #fff;
--buttonhover:        #d6d9d9;

--box:                #e9ecec;
--boxhover:           #f5f8f8;

--border:             rgba(193,196,196,0.55);

--radius:             3px;
--radiusinner:        3px;
--radiusouter:        4px;

--fontnav:            20px;
--fontblog:           16px;
--fontbig:            16px;
--fontnormal:         14px;
--fontsmaller:        13px;
--fontsmallest:       11px;

--heightnormal:       22px;
--heighttight:        20px;

--shadow1:            0px 5px 25px rgba(0,0,0,0.23);
--shadow2:            0px 5px 25px rgba(0,0,0,0.23);
--shadow3:            0px 3px 20px rgba(0,0,0,0.23);

--transitionon:       all 50ms;
--transitionslow:     all 900ms ease-out;
--transitionquick:    all 400ms ease-out;

--invert:             none;
--footerimage:        0.66;
--footerimagehover:   1;
--hide-on-dark:       block;
}

[data-theme="dark"]
{
--textcolormain:      rgba(200,200,200,1);
--textcolormedium:    rgba(80,80,80,1);
--textcolorlight:     rgba(145,145,145,1);
--textcolorwhite:     rgba(255,255,255,1);
--textcolornav:       rgba(240,240,240,1);

--textcolorbright:    rgba(255,44,88,1);
--texcolorhighlight:  rgba(255,44,88,1);

--background:         rgba(36,36,36,1);
--backgrounddarker:   rgba(20,20,20,1);
--backgroundbright:   rgba(80,80,80,1);

--backgroundmodal:    rgba(70,70,70,1);

--backgroundnav:      rgba(70,70,70,0.65);
--backgroundnavhover: rgba(80,80,80,0.9);

--backgroundalttext:  linear-gradient(to bottom, rgba(50,50,50,0.9), rgba(30,30,30,0.65));
--backgroundrow:      rgba(0,0,0,0.2);

--button:             rgba(80,80,80,1);
--buttonhover:        rgba(111,111,111,1);

--box:                rgba(56,56,56,1);
--boxhover:           rgba(70,70,70,1);

--border:             rgba(40,40,40,0.55);

--radius:             3px;
--radiusinner:        3px;
--radiusouter:        4px;

--shadow1:            none;
--shadow2:            none;
--shadow3:            none;

--invert:             brightness(0) invert(1);
--footerimage:        0.15;
--footerimagehover:   0.4;
--hide-on-dark:       none;
}



/* === global === */

.hide-on-dark
{
 display: var(--hide-on-dark);
}

*
{
 box-sizing: border-box;
}

html
{
 overflow-x: hidden;
 background: var(--background);
 scroll-behavior: smooth;
}

html,
body
{
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 position: relative;
 -webkit-overflow-scrolling: none;
 overscroll-behavior: none;
}

main
{
 background: var(--background);
}

html, body, p, a, li
{
 text-align: left;
 font-family: "Roboto Mono", Verdana, sans-serif;
 font-weight: 400;
 color: var(--textcolormain);
}

/*
h1 - Title line 1 "Phil Hoffer"
h2 - Title line 2 "Portfolio", "Photography
h3 - Section titles "Projekte", "Photostories"…
h4 - Titles withing bigger thumbs "Editorial Design"…; subheadlines "Lebenslauf"…; Kontakt
h5 - Titles withing smaller thumbs; titles within modals
h6 - Subheadlines withing story modals "Monday"…
*/

h1, h2, h3, h4, h5, h6
{
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-weight: 500;
 padding: 0;
 text-align: left;
 color: var(--textcolorbright);
 hyphens: none; -webkit-hyphens: none;
}

h1 { font-size: 140px; line-height: 1em; margin: 55px 0 0 -5px; letter-spacing: -1px; text-shadow: var(--shadow1); text-transform: uppercase; }
h2 { font-size: 110px; line-height: 1em; margin: -10px 0 50px -16px; letter-spacing: -1px; text-shadow: var(--shadow2);text-transform: uppercase; }
h3 { font-size: 40px;  font-weight: 500; margin: 0 0 30px -2px; letter-spacing: 0px; text-shadow: var(--shadow3); }
h4 { font-size: 25px;  font-weight: 600; margin: 0 0 10px -1px; color: var(--texcolorhighlight); hyphens: manual; -webkit-hyphens: manual; }
h5 { font-size: 25px;  font-weight: 600; margin: 0; color: var(--textcolormain); }
h6 { font-size: 22px;  font-weight: 600; margin: 0; color: var(--textcolormain); }

h3::after
{
 content: '';
 display: inline-block;
 background: var(--textcolorbright);
 width: 20vw; height: 4px;
 margin-bottom: 9px; margin-left: 10px;
 transform: skew(-6deg);
 box-shadow: var(--shadow3);
}

p, li
{
 margin: 0;
 font-size: var(--fontnormal);
 line-height: var(--heightnormal);
 hyphens: auto; -webkit-hyphens: auto;
}

ul, li
{
 margin: 0;
 padding: 0;
 list-style-type: none;
}

a
{
 font-weight: inherit;
 text-decoration: underline;
 color: inherit;
}

a:hover
{
 text-decoration: none;
}

img
{
 vertical-align: middle;
}



/* === general formatting === */

nav > .container,
header,
section,
footer > .container
{
 margin-left: auto;
 margin-right: auto;
 max-width: var(--maxwidth);
 text-align: center;
 scroll-margin-top: 55px;
}

header,
section
{
 padding-bottom: 50px;
}

.container
{
 padding-left: 50px;
 padding-right: 50px;
}

.grid
{
 display: grid;
}



/* === nav === */

nav
{
 position: fixed;
 width: 100%;
 top: 0;
 z-index: 98;
 background: var(--backgroundnav); 
 box-shadow: 0 5px 25px rgba(0,0,0,0.06);
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px);
 transition: var(--transitionquick);
}

nav:hover
{
 background: var(--backgroundnavhover); 
 transition: var(--transitionon);
}

nav > .container
{
 text-align: left;
 font-size: 0;
}

nav a
{
 display: inline-block;
 padding: 13px 10px;
 text-decoration: none;
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-weight: 500;
 font-size: var(--fontnav);
 color: var(--textcolornav);
}

nav a:first-child
{
 padding-left: 0;
}

nav a span
{
 border-bottom: 1px solid transparent;
}

nav a:hover span
{
 border-color: var(--textcolornav);
}

!nav a.last
{
 float: right;
 padding-right: 0;
}

nav a.out::after
{
 content: ' \21E2';
 font-style: normal;
 line-height: 1em;
}

/* dark mode switcher */
nav a.darkmode {
 float: right;
 padding-right: 0;
}

nav .switch {
 display: inline-block;
 height: 17px;
 position: relative;
 top: 1px;
 width: 30px;
}

nav .switch input {
 display:none;
}

nav .slider {
 background-color: rgba(120,120,120,0.4);
 bottom: 0;
 cursor: pointer;
 left: 0;
 position: absolute;
 right: 0;
 top: 0;
 transition: .4s;
}

nav .slider:before {
 background-color: #fff;
 bottom: 2px;
 content: "";
 height: 13px;
 left: 2px;
 position: absolute;
 transition: .4s;
 width: 13px;
}

nav input:checked + .slider {
 background-color: #66bb6a;
}

nav input:checked + .slider:before {
 transform: translateX(13px);
}

nav .slider.round {
 border-radius: 17px;
}

nav .slider.round:before {
 border-radius: 50%;
}

nav a.darkmode::after {
 content: ' Dark Mode';
 font-style: normal;
 line-height: 1em;
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-weight: 500;
 font-size: var(--fontnav);
 color: var(--textcolornav);
}



/* === header === */

header p
{
 margin-top: 10px;
 font-size: var(--fontbig);
 hyphens: none; -webkit-hyphens: none;
}

header p i,
#arbeiten > p
{
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-weight: 500;
 font-size: 120%;
 letter-spacing: 1.1px;
}



/* === thumbnails === */

#arbeiten > p
{
 margin-bottom: 10px;
 font-size: 100%;
}

#arbeiten .grid
{
 grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
 grid-gap: 2px;
}

#arbeiten .grid > div
{
 display: grid;
 cursor: pointer;
}

#arbeiten .grid > div a
{
 position: relative;
}

#arbeiten .grid > div a img
{
 width: 100%;
}

#arbeiten .grid > div a .alttext
{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 opacity: 0;
 text-align: left;
 background: var(--backgroundalttext);
 transition: var(--transitionquick);
}

#arbeiten .grid > div a:hover img
{ 
 filter: opacity(50%);
 -webkit-filter: opacity(50%);
 transition: var(--transitionquick);
}

#arbeiten .grid > div a:hover .alttext
{
 opacity: 1;
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px);
 transition: var(--transitionon);
}

#arbeiten .grid > div a .alttext > h5
{
 margin: 10px 10px 0 14px;
 padding-top: 8px;
 transition: var(--transitionquick);
}

#arbeiten .grid > div a .alttext p
{
 margin: 6px 10px 10px 15px;
 font-size: var(--fontsmaller);
 line-height: var(--heighttight);
 color: var(--textcolormain);
 hyphens: manual; -webkit-hyphens: manual; 
}

#arbeiten .grid > div a:hover .alttext > h5
{
 padding-top: 0px;
 transition: var(--transitionon);
}

#arbeiten .grid > div a .alttext p:last-child::after
{
 opacity: 0;
 position: absolute;
 bottom: 10px;
 left: 15px;
 width: auto;
 height: auto;
 content:"Klicke für Details";
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-weight: 500;
 font-size: 17px;
 letter-spacing: 1px;
}

#arbeiten .grid > div a:hover .alttext p:last-child::after
{
 opacity: 1;
 animation: delay 3s;
}

@keyframes delay {
   0% { opacity: 0; }
  80% { opacity: 0; }
 100% { opacity: 1; }
}

/* === skills, leistungen & CV === */

#leistungen li,
#tools .inner,
#cv .row,
#photomenu a
{
 padding: 7px 8px 7px 12px;
 text-align: left;
 background-color: var(--box);
 color: var(--textcolormain);
 border-radius: var(--radiusinner);
 box-shadow: none;
 transition: var(--transitionslow);
}

#leistungen ul.grid
{
 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
 grid-gap: 8px;
 margin-bottom: 20px;
}

#leistungen li
{
 position: relative;
 padding: 0;
 border-radius: var(--radius);
 text-align: right;
 transition: var(--transitionquick);
}

#leistungen li img
{
 max-width: 150px;
 max-height: 150px;
 opacity: 0;
 transition: inherit;
 filter: var(--invert);
}

#leistungen li .text
{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 padding: 6px 9px 7px 13px;
 text-align: left;
}

#leistungen li h4
{
 margin: 5px 0 9px -1px;
}

#leistungen li p
{
 margin: 0 0 10px;
 line-height: var(--heighttight);
 color: var(--textcolormain);
}

#tools .outer
{
 margin: 8px 0 0;
 padding: 0px;
 background: var(--backgroundrow);
 border-radius: var(--radiusouter);
}

#tools .ind .inner { --width: 100%; }
#tools .ps  .inner { --width: 100%; }
#tools .ill .inner { --width:  91%; }
#tools .htm .inner { --width:  97%; }
#tools .php .inner { --width:  76%; }
#tools .pho .inner { --width:  94%; }
#tools .off .inner { --width:  95%; }
#tools .ger .inner { --width: 100%; }
#tools .eng .inner { --width:  97%; }

#tools .inner
{
 margin: 0;
 padding-left: 15px;
 overflow: hidden;
 width: var(--width);
 font-weight: 600;
}

#tools .inner span
{
 position: absolute;
 overflow: hidden;
 opacity: 0;
 font-weight: 400;
 transition: inherit;
}

#cv .row
{
 display: flex;
 margin: 8px 0 0;
 justify-content: start;
 hyphens: manual; -webkit-hyphens: manual;
}

#cv .row:hover
{
 margin-right: -10px;
 padding-left: 22px;
 padding-right: 18px;
}

#cv .col-1
{
 flex-basis: 10em;
 padding-right: 15px;
 text-align: right;
}

#cv .col-2
{
 flex-basis: 85%;
 font-weight: 600;
}

#cv .col-2 a
{
 font-weight: inherit;
}

#cv .col-2 a.infodesignlink
{
 text-decoration: none;
 border-bottom: 1px dashed var(--textcolormain);
 cursor: pointer;
}

#cv .col-2 a.infodesignlink:hover
{
 border-bottom: none;
}

#leistungen li:hover,
#tools .outer:hover .inner,
#cv .row:hover
{
 margin-left: -10px;
 background-color: var(--boxhover);
 box-shadow: 0 5px 21px rgba(0,0,0,0.08);
 transition: var(--transitionon);
}

#leistungen li:hover
{
 margin-left: 0;
 margin-top: -5px;
 margin-bottom: 5px;
}

#tools .outer:hover .inner
{
 width: calc(var(--width) + 6%);
}

#leistungen li:hover img,
#tools .outer:hover span
{
 opacity: 1;
 transition: inherit;
}



/* === kunden === */

#logos ul
{
 grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
 grid-gap: 15px;
 overflow: hidden;
}

#logos li > img
{
 width: 100%;
 !background-color: var(--box);
 border-radius: var(--radius);
 filter: grayscale(100%) opacity(75%);
 -webkit-filter: grayscale(100%) opacity(75%);
}

#logos li > img:hover
{
 !background-color: var(--boxhover);
 filter: grayscale(0%) opacity(100%);
 -webkit-filter: grayscale(0%) opacity(100%);
}



/* === kontakt === */

#kontakt p
{
 margin: 0 0 12px;
 font-size: var(--fontbig);
 color:var(--textcolormain);
}

#kontakt h4
{
 margin: 0 0 5px;
}

#kontakt h4 a
{
 font-family: inherit;
 text-decoration: none;
}

#kontakt h4 a:hover
{
 text-decoration: underline;
}



/* === footer === */

footer
{
 padding-bottom: 50px;
 background: var(--backgrounddarker);
}

footer .shadow
{
 display: block;
 width: 100%;
 height: 30px;
 background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.915)   0.0%,
    rgba(0, 0, 0, 0.748)  19.0%,
    rgba(0, 0, 0, 0.541)  34.0%,
    rgba(0, 0, 0, 0.382)  47.0%,
    rgba(0, 0, 0, 0.278)  56.5%,
    rgba(0, 0, 0, 0.194)  65.0%,
    rgba(0, 0, 0, 0.126)  73.0%,
    rgba(0, 0, 0, 0.075)  80.2%,
    rgba(0, 0, 0, 0.042)  86.1%,
    rgba(0, 0, 0, 0.021)  91.0%,
    rgba(0, 0, 0, 0.008)  95.2%,
    rgba(0, 0, 0, 0.002)  98.2%,
    rgba(0, 0, 0, 0.000) 100.0%);
 opacity: 0.1;
}

footer > .container
{
 text-align: left;
 background: var(--backgrounddarker);
}

footer li
{
 display: inline;
 font-size: var(--fontsmaller);
 font-weight: 400;
 color: var(--textcolormedium);
}

footer ul.links
{
 margin-left: -8px;
 margin-bottom: 10px;
 font-size: 0;
}

footer ul.links a
{
 display: inline-block;
 padding: 4px;
}

footer ul.links a img
{
 width: 40px;
 height: 40px;
 opacity: var(--footerimage);
 transition: var(--transitionquick);
}

footer ul.links a:hover img
{
 opacity: var(--footerimagehover);
 transition: var(--transitionon);
}

footer ul.text li:not(:last-child)::after
{
 content: ' | ';
}

footer .impressumlink
{
 cursor: pointer;
}



/* === modal === */

aside
{
 z-index: 99;
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 background-color: rgba(0,0,0,0.5);
 cursor: pointer;
}

.modal-visible
{ display: block; }

aside .modal-content
{
 display: inline-block;
 position: relative;
 overflow: auto;
 left: 0;
 top: 3%;
 bottom: 3%;
 min-width: 300px;
 max-width: calc(var(--maxwidth) + 200px);
 width: auto;
 max-height: 98%;
 text-align: left;
 background: var(--backgroundmodal);
 box-shadow: 0 5px 40px rgba(0,0,0,0.3);
 cursor: auto;
}

aside .modal-content .imageholder
{
 position: relative;
 background: var(--backgroundmodal);
 overflow: hidden;
}

aside.photo .modal-content img
{
 max-width: 100%;
 max-height: calc(100vh - 100px);
 min-height: 260px;
}

aside .modal-content h5
{
 margin: 10px 10px 0 14px;
 line-height: 21px;
}

aside.photo .modal-content h5,
aside.story .modal-content h5
{
 position: absolute;
 margin: 0;
 left: 30px;
 bottom: 70px;
 font-size: 80px;
 line-height: 80px;
 color: var(--textcolorwhite);
 text-shadow: 0 4px 32px rgba(0,0,0,0.4);
}

aside.photo .modal-content h5.right {
 left: auto; right: 32px;
}

aside.story .modal-content h5 {
 bottom: 0; 
 left: 0;
}

aside.photo .modal-content h5 span {
  animation: flicker 1.75s infinite;
  opacity: 0;
}

aside.photo .modal-content h5 span.subtle {
  animation: flickersubtle 1.75s infinite;
  opacity: 0;
}

@keyframes flicker {
   0% { opacity: 0.73; }
  10% { opacity: 0.84; }
  20% { opacity: 0.91; }
  30% { opacity: 0.89; }
  40% { opacity: 0.86; }
  50% { opacity: 0.90; }
  60% { opacity: 0.85; }
  70% { opacity: 0.87; }
  80% { opacity: 0.79; }
  90% { opacity: 0.92; }
 100% { opacity: 0.83; }
}

@keyframes flickersubtle {
   0% { opacity: 0.82; }
  30% { opacity: 0.90; }
  50% { opacity: 0.92; }
  70% { opacity: 0.90; }
 100% { opacity: 0.82; }
}

aside .modal-content p
{
 margin: 10px 10px 10px 15px;
}

aside.photo .modal-content p {
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-weight: 500;
 font-size: var(--fontbig);
 letter-spacing: 0.5px;
}

.animate-opacity {
 animation: opac 150ms;
}

@keyframes opac {
 from { opacity: 0; }
 to { opacity: 1; }
}

button
{
 position: absolute;
 width: 45px;
 height: 45px;
 text-align: center;
 color: var(--textcolormain);
 background-color: var(--button);
 border: none;
 cursor: pointer;
 box-shadow: 0 4px 12px rgba(0,0,0,0.08);
 opacity: 0;
 transition: var(--transitionquick);
}

aside .modal-content:hover button
{
 opacity: 1;
}

button:hover
{
 background-color: var(--buttonhover);
 box-shadow: none;
 transition: var(--transition);
}

.button-left     { top: 50%; left: 0%;  transform: translate(0%,-50%); -ms-transform: translate(-0%,-50%); border-radius: 0 var(--radius) var(--radius) 0; }
.button-right    { top: 50%; right: 0%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%);  border-radius: var(--radius) 0 0 var(--radius); }
.button-topright { right: 0; top: 0; font-size: 18px; border-radius: 0 0 0 var(--radius); }



/* === Was ist Informationsdesign === */

#modal98 .modal-content
{
 padding: 28px 32px 18px 35px;
 max-width: calc(var(--maxwidth) - 200px);
}

#modal98 h5
{
 margin: 0 0 12px -1px;
}

#modal98 p
{
 margin: 0 0 9px;
}

#modal98 h5::after
{
 content: '';
 display: inline-block;
 width: 12vw; height: 2px;
 margin-bottom: 5px; margin-left: 7px;
}



/* === impressum === */

#modal99 .modal-content
{
 padding: 10px 15px 5px; 
 max-width: calc(var(--maxwidth) - 200px);
}

#modal99 h5
{
 margin: 0 0 10px -1px;
}

#modal99 p
{
 margin: 0 0 5px 0;
 font-size: var(--fontsmallest);
}

#modal99 p b
{
 font-weight: 600;
}



/* === photography === */

/* --- menu --- */

#photo
{
 padding-bottom: 35px;
}

#photomenu
{
 text-align: left;
 font-size: 0;
}

#photomenu a
{
 display: inline-block;
 padding: 8px 17px;
 margin-right: 1px;
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-size: 19px;
 letter-spacing: 0.1px;
 font-weight: 600;
 color: var(--textcolormain);
 border-radius: 0;
 text-decoration: none;
 transition: var(--transitionquick);
}

#photomenu a.inactive
{
 background-color: var(--box);
}

#photomenu a.active
{
 background-color: var(--boxhover);
 color: var(--textcolornav);
}

#photomenu a:first-child
{
 padding-left: 20px;
 border-radius: var(--radiusinner) 0 0 var(--radiusinner);
}

#photomenu a:last-child
{
 padding-right: 21px;
 border-radius: 0 var(--radiusinner) var(--radiusinner) 0;
}

#photomenu a:hover
{
 background-color: var(--boxhover);
 cursor: pointer;
 transition: var(--transitionon);
}



/* --- thumbs --- */

#arbeiten .photos
{
 grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
 grid-gap: 2px;
}

#arbeiten .photos > div a img
{
 transition: var(--transitionquick);
}

#arbeiten .photos > div a:hover img
{
 filter: brightness(110%);
 -webkit-filter: brightness(110%);
 transition: var(--transitionoff);
}

#arbeiten .photos > div.hidden
{
 display: none;
}



/* --- profil --- */

#kontakt img
{
 position: relative;
 float: left;
 width: 150px;
 height: 150px;
 border-radius: 100px;
 margin-right: 30px;
 !border: 4px solid var(--textcolorbright);
 !box-shadow: 0 0 0 4px white, 0 8px 25px rgba(0,0,0,0.21);
}

#kontakt .text
{
 position: relative;
 display: block;
 padding: 18px 0 40px;
}



/* --- story-teaser --- */

#stories .grid
{
 grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
 grid-gap: 15px;
}

#stories .story-teaser
{
 display: block;
 position: relative;
 padding-bottom: 70px;
 background: var(--boxhover);
 box-shadow: 0 5px 25px rgba(0,0,0,0.00);
 transition: var(--transitionquick);
 text-decoration: none;
}

#stories .story-teaser:hover
{
 box-shadow: 0 5px 25px rgba(0,0,0,0.13);
 z-index: 90;
 cursor: pointer;
 transition: var(--transitionon);
}

#stories .story-teaser a
{
 display: block;
 position: relative;
 text-decoration: none;
}

#stories .story-teaser img
{
 position: relative;
 width: 100%;
 transition: inherit;
}

#stories .story-teaser .top
{
 position: absolute;
 display: block;
 background: url('../graphics/icon-top-96.png');
 background-size: 48px;
 width: 48px;
 height: 48px;
 top: 5px; left: 2px;
}

#stories .story-teaser h4
{
 margin: 0;
 padding: 11px 20px 7px;
}

#stories .story-teaser p
{
 margin: 0;
 padding: 0 20px 7px;
 line-height: var(--heighttight);
}

#stories .story-teaser p:last-child
{
 padding-bottom: 15px;
}

#stories .story-teaser p.meta
{
 font-size: var(--fontsmaller);
 color: var(--textcolorlight);
}

#stories .lesen,
aside.story .close
{
 position: absolute;
 display: block;
 width: auto;
 height: auto;
 bottom: 0;
 margin: 0 0 20px 20px;
 padding: 8px 14px 9px 15px;
 font-family: Barlow, Tahoma, Helvetica, Arial, sans-serif;
 font-style: italic;
 font-weight: 500;
 font-size: 16px;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 transition: var(--transitionquick);
 background: inherit;
 box-shadow: none;
 opacity: 1;
}

aside.story .close
{
 position: relative;
 margin: 20px 0 15px 10%;
 padding: 8px 15px 9px 14px;
}

#stories .lesen:hover
{
 background: inherit;
}

#stories .story-teaser:hover .lesen,
aside.story .close:hover
{
 background: var(--box);
 transition: var(--transitionon);
 cursor: pointer;
}

aside.story .close:hover
{
 background: var(--box);
}

#stories .story-teaser:hover img
{
 filter: brightness(110%);
 -webkit-filter: brightness(110%);
 transition: var(--transitionon);
}

#stories .lesen span::after
{
 font-family: "Roboto Mono", Verdana, sans-serif !important;
 font-style: normal;
 content: '\BB';
 padding-left: 5px;
}

aside.story .close span::before
{
 font-family: "Roboto Mono", Verdana, sans-serif !important;
 font-style: normal;
 content: '\AB';
 padding-right: 5px;
}

/* --- story modal --- */

aside.story .modal-content
{
 max-width: calc(var(--maxwidth) + 100px);
 background: var(--backgroundmodal);
 padding: 0 0 16px;
 max-height: 95%;
 position: relative;
}

aside.story .modal-content .intro
{
 margin: 0 0 23px;
 padding: 0 0 16px;
 background: var(--backgroundbright);
 box-shadow: 0 0 25px rgba(0,0,0,0.1);
 position: relative;
}

aside.story .modal-content figure
{
 margin: 0 0 32px;
 position: relative;
}

aside.story .modal-content figure img
{
 width: 100%;
 height: 100%;
}

aside.story .modal-content figure figcaption
{
 padding-top: 10px;
}

aside.story .modal-content figure.hero
{
 margin-bottom: 20px;
 box-shadow: 0 3px 20px rgba(0,0,0,0.0);
}

aside.story .modal-content figure.wide,
aside.story .modal-content figure.full figcaption
{
 margin-right: 10%;
 margin-left: 10%;
}

aside.story .modal-content figure.left
{
 width: 40%;
 height: 40%;
 margin-left: 10%;
 margin-right: 20px;
 float: left;
}

aside.story .modal-content figure.right
{
 width: 40%;
 height: 40%;
 margin-right: 10%;
 margin-left: 20px;
 float: right;
}

aside.story .modal-content figure.left1
{
 width: 39%;
 height: 39%;
 margin-left: 10%;
 margin-right: 0px;
 float: left;
}

aside.story .modal-content figure.right1
{
 width: 39%;
 height: 39%;
 margin-right: 10%;
 margin-left: 0px;
 float: right;
}

aside.story .modal-content figure figcaption
{
 margin: 0;
 font-family: "Open Sans", Verdana, sans-serif;
 font-size: var(--fontnormal);
}

aside.story .modal-content figure figcaption .credits
{
 opacity: 0.75;
}

aside.story a
{
 font-family: inherit;
 font-size: inherit;
 font-weight: inherit;
 color: inherit;
}

aside.story hr
{
 margin: 34px 33% 40px;
 border: none;
 border-top: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, #DED6BA, #ACC0D8) 1;
}

@media screen and (min-width: 700px)
{
	.mobile-only
	{
	 display: none;
	}

	aside.story .modal-content figure figcaption.fancy
	{
	 display: block;
	 position: absolute;
	 padding: 10px 16px 11px;
	 bottom: 0;
	 left: 0;
	 background: var(--backgroundnav);
	 -webkit-backdrop-filter: blur(10px);
	 backdrop-filter: blur(10px);
	}
	
	aside.story .modal-content figure figcaption.fancy.long
	{
	 right: 0;
	}
}

aside.story .modal-content .stats
{
 margin: 16px 10% 20px;
 position: relative;
 font-size: 0;
 opacity: 0.85;
}

aside.story .modal-content .stats > div
{
 display: inline-block;
 position: relative;
 width: 25%;
 padding-top: 30px;
 font-family: "Open Sans", Verdana, sans-serif;
 font-size: var(--fontnormal);
 font-weight: 600;
 text-align: center;
 color: #000;
 background-size: 24px;
 background-repeat: no-repeat;
 background-position: center top;
 filter: var(--invert);
 opacity: 0.8;
}

aside.story .modal-content .stats > div.time     { background-image: url(../graphics/icon-time-96.png); }
aside.story .modal-content .stats > div.distance { background-image: url(../graphics/icon-distance-96.png); }
aside.story .modal-content .stats > div.up       { background-image: url(../graphics/icon-arrow-up-right-96.png); }
aside.story .modal-content .stats > div.down     { background-image: url(../graphics/icon-arrow-down-right-96.png); }

aside.story .modal-content h5,
aside.story .modal-content h6
{
 margin: 0 calc(10% - 1px) 20px;
 font-size: 55px;
 line-height: 1.1em; 
}

aside.story .modal-content h6
{
 margin-top: 33px;
 font-size: 27px;
}

aside.story .modal-content p,
aside.story .modal-content li,
aside.story .modal-content ul
{
 margin: 0 10% 18px;
 font-family: "Open Sans", Verdana, sans-serif;
 font-size: var(--fontblog);
 font-weight: 400;
 line-height: 1.6em;
 text-align: justify;
}

aside.story .modal-content .intro p
{
 margin-bottom: 13px;
}

aside.story .modal-content p.meta
{
 font-size: var(--fontsmaller);
 color: var(--textcolorlight);
 text-align: left;
}

aside.story .modal-content ul
{
 margin-bottom: 18px;
}

aside.story .modal-content li
{
 margin: 3px 0 3px 20px;
 list-style-type: disc;
 text-align: left;
}

aside.vintage .modal-content figure:not(.hero)
{
 margin-top: 16px;
 margin-bottom: 16px;
}

aside.vintage .modal-content p
{
 margin: 0 10% 32px;
}

aside.story .modal-content .clearfix
{
 clear: both;
}



/* === smaller screens and devices === */

/* smaller text and reduced padding on small screens */
@media screen and (max-width: 700px)
{
	.container { padding-left: 20px; padding-right: 20px; }
	h1 { font-size: 89px !important; margin: 50px 0 0 2px; }
	h2 { font-size: 69px !important; margin: 0 0 30px -5px; }
	h3 { font-size: 33px !important; margin: 0 0 20px -2px; }
	h3::after { width: 25vw; height: 3px; margin-bottom: 7px; margin-left: 9px; }
	nav a { padding: 10px 7px; }
	aside .modal-content,
	aside.story .modal-content { top: 0; bottom: 0; max-height: 100%; }
	aside.story .modal-content figure.wide,
	aside.story .modal-content figure.left,
	aside.story .modal-content figure.left1,
	aside.story .modal-content figure.right,
	aside.story .modal-content figure.right1 { width: 100%; height: 100%; margin-left: 0; margin-right: 0; float: none; }
	aside.story .modal-content figure figcaption,
	aside.story .modal-content figure.full figcaption,
	aside.story .modal-content h5,
	aside.story .modal-content h6,
	aside.story .modal-content p,
	aside.story .modal-content li,
	aside.story .modal-content ul,
	aside.story .modal-content .stats { margin-left: 30px; margin-right: 30px; }
	aside.photo .modal-content h5 { left: 16px; line-height: 40px; }
	aside.photo .modal-content h5,
	aside.story .modal-content h5 { font-size: 40px; }
	aside.story .close { margin-left: 30px; }
	button { opacity: 1; }
}

/* even smaller screens */
@media screen and (max-width: 420px)
{
	.container { padding-left: 10px; padding-right: 10px; }
	nav > .container, header, section, footer > .container { scroll-margin-top: 65px; }
	h1 { font-size: 62px !important; margin: 60px 0 0 2px; }
	h2 { font-size: 48px !important; margin: 0 0 20px -3px; }
	h3 { font-size: 27px !important; margin: 0 0 10px -1px; }
	h3::after { width: 25vw; height: 3px; margin-bottom: 6px; margin-left: 8px; }
	nav a { padding: 8px 10px 8px 0; }
	aside.photo .modal-content h5,
	aside.story .modal-content h5 { font-size: 33px; }
	#logos { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
	#kontakt img { width: 120px; height: 120px; margin-right: 20px; }
	#kontakt .text { padding: 8px 0 40px; }
}

/* 2-row nav on smaller screens */
@media screen and (max-width: 480px)
{
	!nav a { padding: 10px 15px 0 0; }
	!nav a.last { float: none; padding-bottom: 9px; }
	#home h1 { margin-top: 90px; }
	nav > .container, header, section, footer > .container { scroll-margin-top: 90px; }
}

/* break up photomenu for smaller screens */
@media screen and (max-width: 780px)
{
	#photomenu a { padding: 6px 14px 7px !important; font-size: 18px; margin: 0 4px 4px 0; border-width: 1px; border-radius: 0px !important; }
}

/* Impressum auf 3 Zeilen bei kleinen screens */
@media screen and (max-width: 520px) {
	footer ul.text li { display: block; }
	footer ul.text li:not(:last-child)::after { content: ''; }
}

/* hide "hr" on very small screens */
@media screen and (max-width: 340px)
{
	h3::after { display: none; }
	#modal98 h5::after { display: none; }
}

/* always show thumbnail-text on smaller screens, rather than mouseover */
@media screen and (max-width: 600px)
{
	#arbeiten .grid { grid-gap: 5px; }
	#arbeiten .grid > div a { text-decoration: none; }
	#arbeiten .grid > div a img { height: auto; }
	#arbeiten .grid > div a .alttext { opacity: 1; position: relative; top: -10px; background: var(--box); }
	#arbeiten .grid > div a .alttext > h5,
	#arbeiten .grid > div a:hover .alttext > h5 { padding-top: 10px; }
	#arbeiten .grid > div a:hover img { filter: none; -webkit-filter: none; }
	#arbeiten .grid > div a .alttext > p { padding-bottom: 10px; margin-bottom: 0; }
	#leistungen li img { opacity: 1; }
	#logos li > img { filter: none; -webkit-filter: none; }
	#tools .inner span { display: none; }
}