/* general settings */
* {
	font-family: 'Minion Pro';
}
html{
	height: 100%;
}
body {
	background-color: #FFFFFF;
	height: 100%;
}

a{
	  text-decoration: none;
	  color: #000000;
}

.main {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: auto;
	background-color: #FFFFFF;
}

/* navigation bar*/
div.header {
	font-size: 40px;
	font-weight: 400;
  display: flex; /* or inline-flex */
	position: fixed;     /* make it stick */
	top: 0;             /* stick to the very top */
	left: 0;
	width: 100%;        /* full width */
	background-color: #FFFFFF; /* so text doesn't overlap background */
	padding: 15px;
	z-index: 1000;      /* make sure it's above other content */
	box-sizing: border-box;
	--safe-left: 500px;
}

div.navigation{
	margin-left: auto; 
	margin-right: 0px;
	padding-left: 15px;
	display: flex;
	flex-wrap: wrap
}

div.dropdown{
	padding: 0px;
	position: relative;
}

/*.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  max-width: calc(100vw - var(--safe-left));
  z-index: 1;
  right: 0;
}*/

/* dropdown: wider than trigger, horizontal links, but never cross the left safe area */
.dropdown-content {
  display: none;             /* hidden by default */
  position: absolute;
  top: 100%;
  right: 0;                  /* align right edge with trigger's right edge */
  min-width: 240px;          /* minimum sensible width */
  width: max-content;        /* expand to fit children (so it can be wider than the trigger) */
  padding: 10px;
  padding-right: 0px;
  z-index: 1000;

  /* keep links on one line */
  flex-direction: row;
  gap: 12px;                 /* spacing between links */
  align-items: center;
  flex-wrap: wrap;         /* change to wrap if you want multiple rows on small screens */
  justify-content: flex-end;

  /* never let the dropdown extend into the left "no-go" zone */
  max-width: calc(100vw - var(--safe-left));
  left: max(var(--safe-left), auto);

  /* fallback: allow horizontal scroll if viewport is too narrow */
  overflow-x: visible;
}


/* link styling inside dropdown */
.dropdown-content a {
  display: inline-block;
  padding: 6px 10px;
  white-space: nowrap;
  text-decoration: none;
  /*background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px); 
  -webkit-backdrop-filter: blur(2px); /* Safari support */
}

.dropdown a{
	text-decoration-line: none;
	padding: 0px;
	right: 0px;
}

.dropdown a:hover{
	color: #888888;
}

div.dropdown:hover .dropdown-content,
div.dropdown:focus-within .dropdown-content {
  display: flex;
}

/*.dropdown:hover .dropdown-content {display: block;}*/

div.dropdown:hover{
	color: #888888;
}

/*content area */

div.content_box{
	padding-top: 120px;
	padding-left: 140px;
	padding-right: 140px;
}

div.content{
	display: flex; 
	font-size: 1.2rem;
}

div.picture_frame{
	text-align: right;
	font-size: 0.7rem;
	font-style: italic;
}

div.picture_frame h1,
div.picture_frame h2,
div.picture_frame h3{
	font-weight: normal;
	padding: 0px;
	margin: 0px;
}
div.picture{
	margin-left: 0;
	margin-right: 0;
	display: inline-block;
}

a.schluckzettelbogen{
	display: block;
	background-image: url("pictures/startbild_1_onemoreoneless.jpg");
  min-width: 100%;   /* set size */
  aspect-ratio: 1512 / 1228;
  background-size: cover;
  background-position: center;
}
a.schluckzettelbogen:hover{
	background-image: url("pictures/startbild_2_onemoreoneless.jpg");
}

div.two_column_content div{
	flex: 1 1 50%; 
}

/* Mobile override */
@media (max-width: 768px) {
  .two_column_content {
    flex-direction: column; /* stack instead of side by side */
  }
  div.right_lane {
  	padding-left: 5px;
  }
}

div.two_column_content img{
	max-width: 36vw;
}

div.single_column_content img{
	max-width: 72vw;
}

div.footer{
	margin-top: 20px;
	padding-bottom: 10px;
	width: 100%;
	text-align: center;
}

div.left_lane{
	padding-left: 5px;
	padding-right: 45px;
}

div.right_lane{
	padding-right: 5px;
	padding-left: 45px;
}

.picture_frame {
    position: relative;
    display: inline-block;
}

.picture_frame img {
    display: block;
}

.picture_frame .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.picture_frame:hover .hover {
    opacity: 1;
}