@charset "utf-8";
/* CSS für Erstsemester-Seite Technisches Informationsdesign */

/* Grundlayout */
body {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background: linear-gradient(135deg, #cfefff, #cfefff, #80bfff);
    background-attachment: fixed;
    background-size: cover;
}

/* Standard Panel-Layout */
section {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto 40px auto;
  background-color: #ffffff;
  color: #000B31;
  border-radius: 12px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Intro-Panel ohne Streifen */
section.intro {
  display: block;
}

/* Panel-Inhalt */
.section-content {
  flex: 1;
  padding-right: 40px; /* Abstand zum Streifen */
}

/* Rechter Streifen */
.section-strip {
  width: 80px;
  background: #e6f2ff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.1em;
  color: #000B31;
  padding: 10px;
}

/* Textelemente */
h2 {
  color: #000B31;
  text-align: left;
  font-size: 2.5em;
}

p.inline {
  display: inline;
}

p.underline {
  text-decoration: underline;
  margin-top: 40px;
}

p {
    text-align: justify;	
}

img.standard-image{
    
  margin: 0 20px 0 0; 
  max-width: 40%;      /* verhindert, dass es zu breit wird */
  height: auto;        /* Seitenverhältnis beibehalten */
  border-radius: 8px;
	
}

p.tabstop-underline {
    margin-left: 20px;
    display: inline;
	text-decoration: underline;
}

p.tabstop {
    margin-left: 20px;
    display: inline;
}

.image-container {
  display: flex;
  gap: 20px;         /* Abstand zwischen den Bildern */
  flex-wrap: wrap;   /* erlaubt Umbruch bei wenig Platz */
}

.image-container a {
  flex: 1;           /* jedes Bild-Link-Element bekommt gleich viel Platz */
}

.image-container img {
  width: 100%;       /* Bild füllt die gesamte Breite seines Containers */
  height: auto;      /* Höhe automatisch */
  border-radius: 8px;
  object-fit: cover; /* passt das Bild an, ohne es zu verzerren */
}

img.float {
  float: right;        /* Bild rechtsbündig */
  margin: 0 0 10px 20px; /* Abstand: oben 0, rechts 0, unten 10px, links 20px */
  max-width: 40%;      /* verhindert, dass es zu breit wird */
  height: auto;        /* Seitenverhältnis beibehalten */
  border-radius: 8px;  /* optionale Abrundung */
}

img.centered {
  margin: 10px 10px auto auto; 
  max-width: 100%;      
  height: auto;        /* Seitenverhältnis beibehalten */
  border-radius: 8px;  /* optionale Abrundung */
}

li {
  text-align: justify;
  font-size: large;
}

/* Links */
a {
    color: #025b97;
    text-decoration: none;
    font-weight: bold;	

}

a:hover {
  text-decoration: underline;
}

/* Campusplan */
.campusplan {
  max-width: 100%;
  border: 2px solid #ffffff;
  border-radius: 8px;
}

/* Erstes Panel etwas Abstand nach oben */
section:first-of-type {
  margin-top: 60px;
}

/* Responsive Anpassungen für kleine Bildschirme */
@media (max-width: 600px) {
  body {
    font-size: 16px;   /* Grundschrift etwas größer */
    line-height: 1.8;  /* mehr Zeilenhöhe für Lesbarkeit */
  }

  section {
    flex-direction: column; /* Panel-Inhalt und Streifen untereinander */
    padding: 20px;
  }

  .section-content {
    padding-right: 0;
  }

  .section-strip {
    width: 100%;
    margin-top: 15px;
    font-size: 1em;
  }

  h2 {
    font-size: 1.6em; /* Überschriften kleiner, damit sie nicht umbrechen */
  }

  img.float {
    max-width: 100%;  /* Bilder nehmen volle Breite ein */
    float: none;      /* Kein Umfließen auf kleinen Screens */
    margin: 10px 0;
  }

  img.standard-image,
  img.centered {
    max-width: 100%;
    height: auto;
  }

  .image-container {
    flex-direction: column; /* Bilder untereinander statt nebeneinander */
    gap: 15px;
  }

  p,
  li {
    text-align: left !important;
  }
}