html, body { background-color: #e5eaf1; font-family: Arial, Helvetica, sans-serif; font-size: 13px; } body, .wrapper { color: #002450; margin: 0; padding: 0; max-width: 100%; } header, nav, nav a, main, article, section, aside, footer { border-radius: 0.5em; border: 1px solid; margin: 0; padding: 0; } header { position: fixed; top: 0; left: 0; right: 0; border: 1px thin solid #002450; background-color: #99adc7; margin: 0; padding: 0.2em; } header * { flex: 1 1 0%; } header img { margin: 0; padding: 0; } nav, nav ul, nav li { margin: 0; padding: 0; border: none; } nav ul { display: flex; justify-content: space-around; flex-direction: row; padding: 0 0 0.5em 2em; } nav li { list-style-type: none; } nav a { display:inline-block; width: 90%; background-color: #e5eaf1; border: 1px solid #002450; padding: 0.2em; text-align: center; color: #002450; text-decoration: none; font-weight: bold; } nav a:hover, nav a:focus { color: #f00; } main { display: flex; flex: 1; flex-direction: row; border: none; min-height: 10%; min-width: 16em; /* Mindestbreite (der Überschrift) verhindert Anzeigefehler in modernen Browsern */ margin: 9.5em 0 8.5em 0; padding: 0; } article { flex: 5; align-self: flex-start; background-color: #4c709d; border-color: #002450; margin: 0 0.5em; padding: 0.8em; } section { background-color: #e5eaf1; border-color: #002450; color: #003473; margin: 0; padding: 0.5em; } .logo { width: 150; height: 50; } aside { flex: 1; align-self: flex-start; background-color: #99adc7; border-color: #002450; margin: 0; padding: 0.5em; } footer { position: fixed; bottom: 0; left: 0; right: 0; background-color: #99adc7; border-color: #002450; margin: 0; padding: 0.2em; } footer ul, footer li { margin: 0; padding: 0.2em; border: none; } footer ul { display: flex; justify-content: space-around; flex-direction: column; margin: 0; padding: 0; } footer li { list-style-type: none; margin: 0 0.5em; } footer a { color: #002450; text-decoration: none; font-weight: bold; } footer a:hover, footer a:focus { color: #f00; text-decoration: underline; } .bild { float: left; margin: 0.5em; } .textlinks { text-align: left; } .textmittig { text-align: center; } .textrechts { text-align: right; } div.table { display: table; width: calc(100% - 0.5em); padding: 0.2em; } div.tr { display:table-row; } div.td { display: table-cell; width: 8em; padding: 0.2em; vertical-align: middle; } div.td-klein { display: table-cell; width: 20%; padding: 0.2em; vertical-align: middle; } div.td-gross { display: table-cell; width: 60%; padding: 0.2em; vertical-align: middle; } .back-to-top { background-color: #99adc7; color: #002450; position: fixed; bottom: 8.5em; right: 0.2em; padding: 1em; }