@import url("https://use.typekit.net/eho4jqg.css"); @import url("https://use.typekit.net/eho4jqg.css"); /* AUSGEWÄHLTER TEXT */ ::selection { background-color: rgb(235, 235, 235); } * { margin: 0; margin-left: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* FLIESSTEXT */ p { color: black; font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 350; font-style: normal; font-size: 1vw; line-height: 150%; } /* LISTE */ nav { overflow: hidden; position: fixed; /* bleibt oben fixiert */ top: 0; width: 100%; height: 8vw; font-size: 1vw; } /* Liste */ nav ul { display: flex; justify-content: flex-start; /* wir starten links */ align-items: center; /* vertikal zentrieren */ list-style: none; margin: 3%; padding: 0; gap: 2rem; /* Abstand zwischen EN und About me */ } nav li:first-child { margin-right: auto; } nav li { margin: 0; /* Abstand jetzt besser über padding/margin in ul steuern */ } nav.bottom { justify-content: end; } /* Bearbeitung der Links */ a { transition: all 0.1s; text-decoration: none; color: black; font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 700; font-style: normal; font-size: 1vw; } /* Bearbeitung des Hover-Effekt der Links */ a:hover { font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 350; } table { width: 100%; /* Tabelle nimmt 100% der Breite des Containers ein */ max-width: calc(100% - 80px); /* Stellt sicher, dass der Abstand links und rechts berücksichtigt wird */ margin: 0 auto; /* Zentriert die Tabelle innerhalb ihres Containers */ border-collapse: collapse; margin-top: 80px; } td, th { text-align: left; padding: 8px; } th { color: black; font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 350; font-style: normal; font-size: 1vw; border-bottom: 1px solid black; } td { color: black; font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 350; font-style: normal; font-size: 1vw; } tr { border-bottom: 1px solid black; } /* Ganze Zeile fett beim Hover */ tr:hover td, tr:hover th { font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 700; } #hoverImage { position: fixed; pointer-events: none; /* verhindert, dass das Bild das Hover blockiert */ display: none; z-index: 9999; } #hoverImage img { width: 500px; height: auto; } /* Setzt die Breite der Spalten */ colgroup col:nth-child(5) { width: 30%; /* Die letzte Spalte bekommt mehr Platz */ } colgroup col:nth-child(n):not(:nth-child(5)) { width: 17.5%; /* Reduziert die Breite der anderen Spalten */ } /* Footer unten rechts fixieren */ .site-footer { position: fixed; right: 16px; bottom: 16px; font-size: 0.95rem; margin-right: 2vw; } /* Sprachumschalter – Grundstil */ .lang-toggle a { font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 350; /* Standard: dünn */ text-decoration: none; } /* Aktive Sprache fett machen – gesteuert über */ html[lang="de"] .lang-toggle a[data-lang="de"], html[lang="en"] .lang-toggle a[data-lang="en"] { font-variation-settings: "wdth" 120, "wght" 700; /* FETT */ } /* Hover: unterstreichen erlaubt, Gewicht der aktiven Sprache aber nicht reduzieren */ .lang-toggle a:hover { font-variation-settings: "wght" 700; } /* BIN MIR NICHT SICHER OB ICH DAS BRAUCHE!!! Dein globales a:hover setzt wght=350 – hier gezielt für aktive Sprache überstimmen */ html[lang="de"] .lang-toggle a[data-lang="de"]:hover, html[lang="en"] .lang-toggle a[data-lang="en"]:hover { font-variation-settings: "wdth" 120, "wght" 700; /* bleibt fett */ } /* ===== Mobile Layout (bis 768px) ===== */ @media (max-width: 768px) { /* Hover-Overlay auf Mobile ausblenden */ #hoverImage { display: none !important; } /* Navigation etwas größer auf Mobile */ nav { height: 14vw; } nav a { font-size: 4.2vw; } /* Mobile-Liste statt Tabelle */ .mobile-list { display: block; max-width: calc(100% - 50px); margin: 0 auto; margin-top: 80px; /* analog zur Tabelle */ padding-bottom: 3vh; } .mobile-item { border-bottom: 1px solid black; /* Trennlinie wie in der Tabelle */ padding: 12px 8px; cursor: pointer; } .mobile-item img { width: 100%; height: auto; display: block; margin-bottom: 8px; /* Bild über dem Text */ } .mobile-line { color: black; font-family: "manop-variable", sans-serif; font-variation-settings: "wdth" 120, "wght" 350; font-style: normal; font-size: 4.2vw; /* gut lesbar auf Handy */ line-height: 1.4; } .mobile-line span { display: block; } /* jedes Wort neue Zeile */ .mobile-line .title { font-weight: 700; } .site-footer { position: static !important; display: flex; justify-content: flex-end; } /* LINK-OPTIK */ .site-footer a { font-size: 4.2vw; text-decoration: none; color: #000; } }