@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic");

/*
    Astral by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Reset */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body { -webkit-text-size-adjust: none; }

mark {
  background-color: transparent;
  color: inherit;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input, select, textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

/* Row */

.row {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  align-items: stretch;
}

.row > * { box-sizing: border-box; }

.row.gtr-uniform > * > :last-child { margin-bottom: 0; }

.row.aln-left { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right { justify-content: flex-end; }

.row.aln-top { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

.row > .imp { order: -1; }

.row > .col-1 { width: 8.33333%; }
.row > .off-1 { margin-left: 8.33333%; }

.row > .col-2 { width: 16.66667%; }
.row > .off-2 { margin-left: 16.66667%; }

.row > .col-3 { width: 25%; }
.row > .off-3 { margin-left: 25%; }

.row > .col-4 { width: 33.33333%; }
.row > .off-4 { margin-left: 33.33333%; }

.row > .col-5 { width: 41.66667%; }
.row > .off-5 { margin-left: 41.66667%; }

.row > .col-6 { width: 50%; }
.row > .off-6 { margin-left: 50%; }

.row > .col-7 { width: 58.33333%; }
.row > .off-7 { margin-left: 58.33333%; }

.row > .col-8 { width: 66.66667%; }
.row > .off-8 { margin-left: 66.66667%; }

.row > .col-9 { width: 75%; }
.row > .off-9 { margin-left: 75%; }

.row > .col-10 { width: 83.33333%; }
.row > .off-10 { margin-left: 83.33333%; }

.row > .col-11 { width: 91.66667%; }
.row > .off-11 { margin-left: 91.66667%; }

.row > .col-12 { width: 100%; }
.row > .off-12 { margin-left: 100%; }

.row.gtr-0 { margin-top: 0em; margin-left: 0em; }
.row.gtr-0 > * { padding: 0em 0 0 0em; }
.row.gtr-0.gtr-uniform { margin-top: 0em; }
.row.gtr-0.gtr-uniform > * { padding-top: 0em; }

.row.gtr-25 { margin-top: -0.3125em; margin-left: -0.3125em; }
.row.gtr-25 > * { padding: 0.3125em 0 0 0.3125em; }
.row.gtr-25.gtr-uniform { margin-top: -0.3125em; }
.row.gtr-25.gtr-uniform > * { padding-top: 0.3125em; }

.row.gtr-50 { margin-top: -0.625em; margin-left: -0.625em; }
.row.gtr-50 > * { padding: 0.625em 0 0 0.625em; }
.row.gtr-50.gtr-uniform { margin-top: -0.625em; }
.row.gtr-50.gtr-uniform > * { padding-top: 0.625em; }

.row { margin-top: -1.25em; margin-left: -1.25em; }
.row > * { padding: 1.25em 0 0 1.25em; }
.row.gtr-uniform { margin-top: -1.25em; }
.row.gtr-uniform > * { padding-top: 1.25em; }

.row.gtr-150 { margin-top: -1.875em; margin-left: -1.875em; }
.row.gtr-150 > * { padding: 1.875em 0 0 1.875em; }
.row.gtr-150.gtr-uniform { margin-top: -1.875em; }
.row.gtr-150.gtr-uniform > * { padding-top: 1.875em; }

.row.gtr-200 { margin-top: -2.5em; margin-left: -2.5em; }
.row.gtr-200 > * { padding: 2.5em 0 0 2.5em; }
.row.gtr-200.gtr-uniform { margin-top: -2.5em; }
.row.gtr-200.gtr-uniform > * { padding-top: 2.5em; }

/* Basic */

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
  background-image: url("images/overlay.png"), url("images/bg.jpg");
  background-repeat: repeat, no-repeat;
  background-size: auto, 100% 100%;
  background-attachment: fixed;
  overflow-y: scroll;
}

body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
  -moz-animation: none !important;
  -webkit-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

body, input, textarea, select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  color: #777777;
  font-size: 20pt;
  line-height: 1.75em;
}

@media screen and (max-width: 1680px) {
  body, input, textarea, select { font-size: 15pt; }
}
@media screen and (max-width: 1280px) {
  body, input, textarea, select { font-size: 14pt; }
}
@media screen and (max-width: 736px) {
  body, input, textarea, select { font-size: 12pt; }
}
@media screen and (max-width: 360px) {
  body, input, textarea, select { font-size: 11pt; }
}

strong, b, h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: #363636;
}

h1 {
  font-size: 2.4em;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.8em;
  letter-spacing: -0.015em;
}

h3, h4, h5, h6 {
  font-size: 1.25em;
  letter-spacing: -0.015em;
}

@media screen and (max-width: 736px) {
  h1 { font-size: 1.75em; }
  h2 { font-size: 1.375em; }
  h3, h4, h5, h6 { font-size: 1em; }
}

blockquote {
  border-left: solid 0.5em #ddd;
  padding: 1em 0 1em 2em;
  font-style: italic;
}

em, i { font-style: italic; }

hr {
  border: 0;
  border-top: solid 1px #ddd;
  padding: 1.5em 0 0 0;
  margin: 1.75em 0 0 0;
}

sub {
  position: relative;
  top: 0.5em;
  font-size: 0.8em;
}

sup {
  position: relative;
  top: -0.5em;
  font-size: 0.8em;
}

p, ul, ol, dl, table, blockquote, form { margin-bottom: 2em; }

/* Form */

form label {
  display: block;
  font-weight: 400;
  color: #363636;
  margin: 0 0 1em 0;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
  -webkit-appearance: none;
  border: 0;
  background: #f4f4f4;
  padding: 0.75em;
  width: 100%;
  -moz-transition: background-color .25s ease-in-out;
  -webkit-transition: background-color .25s ease-in-out;
  -ms-transition: background-color .25s ease-in-out;
  transition: background-color .25s ease-in-out;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form select:focus,
form textarea:focus {
  background: #f8f8f8;
}

/* Section/Article */

section, article { margin-bottom: 3em; }

section > :last-child,
section:last-child,
article > :last-child,
article:last-child {
  margin-bottom: 0;
}

header { margin: 0 0 1.5em 0; }

header > p {
  margin: 0.5em 0 0 0;
  color: #aaa;
}

/* Image */

.image { display: inline-block; }
.image img { display: block; width: 100%; }
.image.fit { display: block; width: 100%; }

/* =========================================================
   Buttons in Bordeaux
========================================================= */

:root {
  --btn-bg: #7b1e3a;
  --btn-bg-hover: #65182f;
  --btn-bg-active: #541327;
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
  -moz-transition: background-color .25s ease-in-out;
  -webkit-transition: background-color .25s ease-in-out;
  -ms-transition: background-color .25s ease-in-out;
  transition: background-color .25s ease-in-out;
  -webkit-appearance: none;
  display: inline-block;
  background-color: var(--btn-bg);
  color: #ffffff;
  border: 0;
  cursor: pointer;
  outline: 0;
  padding: 0.7em 1.5em 0.7em 1.5em;
  text-decoration: none;
  border-radius: 6px;
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background-color: var(--btn-bg-hover);
}

.button:active,
input[type="submit"]:active,
input[type="button"]:active,
button:active {
  background-color: var(--btn-bg-active);
}

.button.alt { background-color: var(--btn-bg); }
.button.alt:hover { background-color: var(--btn-bg-hover); }
.button.alt:active { background-color: var(--btn-bg-active); }

.button.small { font-size: 0.75em; }
.button.large { font-size: 1.25em; padding: 0.5em 1.25em; }
.button.xlarge { font-size: 1.5em; padding: 0.5em 1.25em; }

@media screen and (max-width: 736px) {
  .button,
  input[type="submit"],
  button {
    width: 100%;
  }
}

/* Actions */
ul.actions {
  list-style: none;
  padding-left: 0;
}

ul.actions li {
  display: inline-block;
  padding-left: 0;
  margin: 0 0 0 0.5em;
}

ul.actions li:first-child { margin-left: 0; }

/* Nav */

#nav {
  text-align: center;
  height: 4.25em;
  cursor: default;
}

#nav a {
  position: relative;
  display: inline-block;
  color: #ffffff;
  opacity: 0.35;
  outline: 0;
  margin: 0 0.25em;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -ms-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;

  width: auto;
  height: auto;
  line-height: 1;
  font-size: 2.5em;
}

#nav a i {
  display: inline-block;
  width: 1em;
  text-align: center;
}

#nav a:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: -0.75em;
  margin-left: -0.5em;
  border-bottom: solid 0em #ffffff;
  border-left: solid 0.5em transparent;
  border-right: solid 0.5em transparent;
  -moz-transition: border-bottom-width .25s ease-in-out;
  -webkit-transition: border-bottom-width .25s ease-in-out;
  -ms-transition: border-bottom-width .25s ease-in-out;
  transition: border-bottom-width .25s ease-in-out;
}

#nav a span {
  display: block;
  position: absolute;
  background: #222222;
  color: #ffffff;
  top: -2.75em;
  font-size: 0.3em;
  height: 2.25em;
  line-height: 2.25em;
  left: 50%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
  width: 5.5em;
  margin-left: -2.75em;
}

#nav a:hover { opacity: 1.0; }
#nav a:hover span { opacity: 1.0; }

#nav a.active { opacity: 1.0; }
#nav a.active:after { border-bottom-width: 0.5em; }

#nav a span:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -0.4em;
  left: 50%;
  margin-left: -0.6em;
  border-top: solid 0.6em #222222;
  border-left: solid 0.6em transparent;
  border-right: solid 0.6em transparent;
}

@media screen and (max-width: 980px) {
  #nav a span { display: none; }
}

/* Wrapper */

#wrapper {
  width: 45em;
  margin: 0 auto;
  min-height: 100vh;
  max-width: 100%;
  padding: 4em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  -moz-transition: opacity 1s ease-in-out;
  -webkit-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

body.is-preload #wrapper { opacity: 0; }

/* Main */

#main {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.25);
}

/* Panels */

#main > .panel {
  -moz-transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
  margin-bottom: 0;
  position: relative;
  padding: 3.5em 2.5em 2.5em 2.5em;
  width: 100%;
}

#main > .panel.inactive { opacity: 0; }

/* Footer */

#footer {
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 2em 0 0 0;
  font-size: 0.75em;
}

#footer a {
  color: rgba(255, 255, 255, 0.65);
  -moz-transition: color .25s ease-in-out;
  -webkit-transition: color .25s ease-in-out;
  -ms-transition: color .25s ease-in-out;
  transition: color .25s ease-in-out;
}

#footer a:hover { color: white; }

/* Footer: flex layout + Social als eigene Zeile */
#footer ul.copyright{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em 1em;
}

#footer ul.copyright > li{
  display: inline-flex;
  align-items: center;
  line-height: 1;

  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

/* Social-Block in neuer Zeile */
#footer ul.copyright > li.social{
  flex: 0 0 100%;
  width: 100%;
  justify-content: center;
  margin-top: 0.35em;
}

/* Social-Links: groß, bordeaux, großer Abstand, große Tap-Fläche, ohne Unterstreichung */
#footer ul.copyright > li.social a,
#footer ul.copyright > li.social a:visited,
#footer ul.copyright > li.social a:hover,
#footer ul.copyright > li.social a:active,
#footer ul.copyright > li.social a:focus,
#footer ul.copyright > li.social a:focus-visible{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;
  margin: 0 14px;

  font-size: 32px;
  line-height: 1;

  color: var(--btn-bg);
  text-decoration: none;
  border: 0;
  border-bottom: 0;
  box-shadow: none;
  background: transparent;

  -webkit-text-decoration: none;
  -webkit-tap-highlight-color: transparent;

  transition: color .2s ease-in-out;
}

#footer ul.copyright > li.social a:hover{ color: var(--btn-bg-hover); }
#footer ul.copyright > li.social a:active{ color: var(--btn-bg-active); }

/* Attribution weniger prominent */
#footer ul.copyright > li.attribution { opacity: 0.55; }
#footer ul.copyright > li.attribution a { color: rgba(255, 255, 255, 0.5); }
#footer ul.copyright > li.attribution a:hover { color: rgba(255, 255, 255, 0.75); }

/* =========================================================
   CUSTOM (deine Ergänzungen)
========================================================= */

.hero { padding-top: 2em; }
.hero h1 { margin-bottom: 0.2em; }

.subtitle {
  font-size: 1.4em;
  font-weight: 300;
}

.profile-image { text-align: center; }
.profile-image img {
  width: 100%;
  max-width: 450px;
  height: auto;
  display: inline-block;
  object-fit: contain;
}

#book h3 { margin-top: 0; }
#book .image img { object-fit: contain; }
#book .actions { margin-top: 2em; }

.acting-timeline { margin-top: 2em; }

.acting-card {
  padding: 1.5em;
  margin-bottom: 1.5em;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  border-left: solid 5px #888;
}

.acting-year {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.acting-card h3 { margin-bottom: 0.5em; }
.acting-card p { margin-bottom: 0; }

.optional-image img { object-fit: contain; }

.education-list { margin-top: 1em; }
.education-list p {
  padding-bottom: 1em;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.showreel { margin-bottom: 2em; }

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.is-hidden { display: none !important; }

/* Responsive Grid Fix: col-*-medium / col-*-small unterstützen */
@media screen and (max-width: 980px) {
  .row > .col-12-medium { width: 100% !important; }
  .row > .col-6-medium  { width: 50% !important; }
  .row > .col-4-medium  { width: 33.33333% !important; }
}

@media screen and (max-width: 736px) {
  .row > .col-12-small { width: 100% !important; }
  .row > .col-6-small  { width: 50% !important; }
  .row > .col-4-small  { width: 33.33333% !important; }
}