/* Grundlayout */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Arial', sans-serif; }
body { color: #1e293b; line-height: 1.6; }
a { text-decoration: none; }
img { max-width: 100%; display: block; border-radius: 12px; }

/* Header */
header { background: linear-gradient(90deg, #1e293b, #334155); color: white; text-align: center; padding: 6rem 1rem; }
header h1 { font-size: 2.5rem; margin-bottom: 1rem; }
header p { font-size: 1.2rem; margin-bottom: 2rem; }
.btn { display: inline-block; background-color: #3b82f6; color: white; font-weight: bold; padding: 0.75rem 1.5rem; border-radius: 9999px; transition: background 0.3s; }
.btn:hover { background-color: #2563eb; }

/* Sections */
section { padding: 6rem 1rem; max-width: 1200px; margin: auto; }
.section-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-bottom: 4rem; }
.section-flex img { flex: 1 1 45%; }
.section-text { flex: 1 1 50%; }
.section-text h2 { font-size: 2rem; margin-bottom: 1rem; }
.section-text ul { list-style-type: disc; padding-left: 1.5rem; }

/* Kontaktformular */
form { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); max-width: 600px; margin: auto; }
form label { display: block; margin-bottom: 0.5rem; font-weight: bold; }
form input, form textarea { width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px; margin-bottom: 1.5rem; }
form input:focus, form textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
form button { width: 100%; background: #3b82f6; color: white; font-weight: bold; padding: 0.75rem; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s; }
form button:hover { background: #2563eb; }

/* Footer */
footer { text-align: center; padding: 2rem 1rem; background: #1e293b; color: white; font-size: 0.875rem; }

a:link {
  color: white;
  /*background-color: transparent;*/
  text-decoration: none;
}
a:hover {
  color: red;
  /*background-color: transparent;*/
  text-decoration: underline;
}
a:visited {
  color: white;
  /*background-color: transparent;*/
  text-decoration: none;
}

/* Responsive */
@media (max-width: 400px) {
  .section-flex { flex-direction: column; }
}
.profil {
    max-width: 200px
}

/* Portfolio */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.portfolio-item {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  padding: 1rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.portfolio-item h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #1e293b;
}

.portfolio-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      padding: 40px 20px;
    }

    .pdf-box {
      flex: 1 1 45%;
      background-color: #f9f9f9;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .pdf-box:hover {
      transform: translateY(-5px);
    }

    .pdf-box h2 {
      text-align: center;
      padding: 15px;
      background-color: #004080;
      color: white;
      font-size: 1.2rem;
    }

    .pdf-box embed {
      width: 100%;
      height: 500px;
      border: none;
    }

    .extra-box {
      margin: 40px auto;
      max-width: 1200px;
      background-color: #eef3fa;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    .extra-box h3 {
      color: #004080;
      margin-bottom: 10px;
    }

    .extra-box p {
      line-height: 1.6;
    }

    @media (max-width: 900px) {
      .pdf-box {
        flex: 1 1 100%;
      }
      .pdf-box embed {
        height: 400px;
      }
    }