/* CSS Document */ .box { box-sizing: border-box; box-shadow: 5px 8px darkgrey; border: 10px solid lightgrey; padding: 5px; width: 400px; height: 180px; margin: 20px auto; /* horizontal zentriert, Abstand oben/unten */ } /* Textarea für symbolische/numerische/LaTeX-Ausgabe */ textarea.readonly-output { background-color: #fefefe; /* helles Weiß */ border: 1px solid #ccc; padding: 8px; font-family: monospace; font-size: 14px; color: darkblue; /* Textfarbe dunkelblau */ resize: none; /* kein manuelles Vergrößern */ width: calc(100% - 8px); /* Padding berücksichtigen */ box-sizing: border-box; /* Padding/Borders mit einberechnet */ } /* Readonly-Style */ textarea.readonly-output:readonly { background-color: #f9f9f9; cursor: default; } /* Falls nötig: Standard-Textarea fallback */ textarea { resize: none; width: 100%; box-sizing: border-box; } /* Optional: Tabellen für Ergebnisse zunächst verstecken */ .tblAnswer { visibility: hidden; /* wird per JS sichtbar */ width: 380px; } .math-output { background-color: #fefefe; border: 2px solid #ccc; padding: 8px; font-family: serif; color: darkblue; width: 345px; overflow-y: auto; min-height: 5em; max-height: 8em; } .links { color: blue; text-decoration: none; } #accordion .ui-accordion-header { background: lightgrey; /* Dein Blau */ color: black; /* Textfarbe */ border: 1px solid black; } /* Die Pfeile auf Schwarz umstellen */ #accordion .ui-icon { background-image: url("../jquery/jquery-ui-1.14.1/images/ui-icons_444444_256x240.png"); } #accordion { height: 700px; } #accordion .ui-accordion-content { min-height: 250px; /* Deine gewünschte Mindesthöhe */ max-height: 600px; overflow-y: auto; /* Aktiviert den Scrollbalken bei Bedarf */ } p { /* Blocksatz für ein gleichmäßiges Schriftbild */ text-align: justify; /* Aktiviert die Silbentrennung (benötigt ) */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; /* Verhindert "Löcher" im Text durch zu lange Zeilen */ max-width: 800px; margin-left: auto; margin-right: auto; /* Verbessert die Lesbarkeit bei vollen Zeilen */ line-height: 1.1; margin-bottom: 1.1em; } .ui-tabs .ui-tabs-nav li { border: 1px solid darkgrey; width: 33.33% !important; padding: 3px !important; margin: 0 !important; box-sizing: border-box !important; } .ui-tabs .ui-tabs-nav li a { height: 20px; /* gewünschte Höhe */ line-height: 20px; /* Text vertikal zentrieren */ display: flex; align-items: center; justify-content: center; } .ui-tabs .ui-tabs-nav { background: transparent !important; border: none !important; } .ui-widget-header { background: transparent !important; border: none !important; } /* Aktiver/selektierter Tab */ .ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-state-active { background: #333 !important; /* dunkles Grau */ border-color: #333 !important; /* Rahmen anpassen */ } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-active a { color: #fff !important; /* weiße Schrift */ } .outputbox { width: 520px; min-height: 30px; /* Höhe wie Tabellenzellen */ max-height: none; /* kein unnötiges Scrollen */ border: 1px solid #aaa; padding: 4px 6px; background: #fff; white-space: normal; overflow-wrap: normal; word-break: keep-all; line-height: 22px; /* optisch wie Tabellenzellen */ box-sizing: border-box; } .outputbox span { display: inline-block; margin-right: 14px; }