/*
Name: Manfredtool
URI: http://www.ipidca.de/manfredtool/data/manfredtool4-css.css
Version: 4.0
Description: css        - index.html -           
Author: SuTu - Gratulation! Es wurden keine Fehler gefunden.
Author URI: http://www.ipidca.de
X:\manfred\sutu-2020\news\manfredtool4-css 27.02.2025 00:03
Author URI: https://www.manfredtool.de     23.03.2025 09:55
https://www.manfredtool.de/data/manfredtool4-css.css"
*/
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #ababab; /* Dunkelgrauer Hintergrund */
            margin: 0;
        }
/* Gemeinsame Eigenschaften für alle Überschriften */
.heading {
    color: #333; /* Textfarbe */
    font-weight: bold; /* Schriftstärke */
    background-color: #d3d3d3; /* Hintergrundfarbe */
    text-align: center; /* Text zentrieren */
    border: 1px solid #4d4d4d; /* Rahmen */
    border-radius: 4px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Schatten */
}

/* Stil für die Überschrift h1 */
h1 {
    font-size: 2.5em; /* 40px */
    margin-top: 26px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand nach unten */
    padding: 18px; /* Innenabstand */
}

/* Stil für die Überschrift h2 */
h2 {
    font-size: 2em; /* 32px */
    margin-top: 20px; /* Abstand nach oben */
    margin-bottom: 15px; /* Abstand nach unten */
    padding: 16px; /* Innenabstand */
}

/* Stil für die Überschrift h3 */
h3 {
    font-size: 1.75em; /* 28px */
    margin-top: 16px; /* Abstand nach oben */
    margin-bottom: 10px; /* Abstand nach unten */
    padding: 14px; /* Innenabstand */
}

/* Stil für die Überschrift h4 */
h4 {
    font-size: 24px; /* 24px */
    margin-top: 14px; /* Abstand nach oben */
    margin-bottom: 8px; /* Abstand nach unten */
    padding: 12px; /* Innenabstand */
}

/* Stil für die Überschrift h5 */
h5 {
    font-size: 1.25em; /* 20px */
    font-weight: normal; /* Schriftstärke */
    margin-top: 4px; /* Abstand nach oben */
    margin-bottom: 4px; /* Abstand nach unten */
    padding: 6px; /* Innenabstand */
}

/* Stil für die Überschrift h6 */
h6 {
    font-size: 1em; /* 16px */
    font-weight: normal; /* Schriftstärke */
    margin-top: 10px; /* Abstand nach oben */
    margin-bottom: 5px; /* Abstand nach unten */
    padding: 8px; /* Innenabstand */
}        
        .spacer {
            height: 6px; /* Höhe verringert */   
        }
        .external-frame-calculator {
            border: 2px solid darkgray; /* Dunkelgrauer Rahmen */
            border-radius: 10px;
            padding: 10px; /* Padding für äußeren Rahmen */
            background-color: #ababab;
        }
        .calculator {
            background: #eeeeee; /* Hellgrauer Hintergrund für den Rechner */
            padding: 15px; /* Padding erhöht für bessere Benutzererfahrung */
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            width: 330px; /* Breite erhöht */
        }
          .manfredtool_teilen {
            background: #eeeeee; /* Hellgrauer Hintergrund für den Rechner */
            padding: 0px; /* Padding erhöht für bessere Benutzererfahrung */
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            width: 360px; /* Breite erhöht */
        }
        #title {
            font-size: 16px; /* Schriftgröße erhöht */
            text-align: center;
            margin-bottom: 10px; /* Höhe verringert */
        }
        #display {
            width: 93%;
            height: 50px; /* Höhe erhöht */
            font-size: 28px; /* Schriftgröße erhöht */
            text-align: right;
            margin-bottom: 7px; /* Höhe verringert */
            padding: 10px; /* Padding erhöht */
            border: 1px solid #999;
            border-radius: 5px;
            background-color: #ffffd5; /* Gelb für display */
            transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */
        }
        /* Für den frame-display */
        .frame-display {
            position: relative;
            background-color: #727679; /* Hintergrundfarbe des Displays */
            border-radius: 1px;
            padding: 10px; /* Padding hinzugefügt */
        }
        /* Für den frame-display */
        .memory-display {
            width: calc(100% - 16px);
            border-radius: 5px;
            padding: 0px; /* Padding hinzugefügt */
        }
        .frame-display input {
            width: 100%; /* Breite des Eingabefelds angepasst */
            height: 40px; /* Höhe des Eingabefelds */
            font-size: 24px; /* Schriftgröße des Eingabefelds */
            border: none;
            border-radius: 4px;
            background-color: #ffffff; /* Hintergrundfarbe des Eingabefelds */
            padding: 5px; /* Padding im Eingabefeld */
            transition: background-color 0.3s; /* Übergangseffekt für Hintergrundfarbe */
        }
        .frame-display .top-left {
            position: absolute;
            top: 5px;
            left: 10px;
            color: white; /* Textfarbe */
            font-size: 12px; /* Textgröße */
        }
        .frame-display .top-right {
            position: absolute;
            top: 5px;
            right: 10px;
            color: white; /* Textfarbe */
            font-size: 12px; /* Textgröße */
        }
        .button {
            flex: 1;
            height: 38px; /* Höhe erhöht */
            font-size: 20px;
            margin: 2px; /* Höhe verringert */
            cursor: pointer;
            border: none;
            background-color: #007BFF; /* Blau für die Haupttasten */
            color: white;
            border-radius: 5px;
            transition: background-color 0.3s, transform 0.2s;
        }
        .height-66px {
            height: 66px; /* Höhe erhöht */
        }
        .minischrift {
            text-align: center;
            font-size: 12px;
        }
        .button:hover {
            background-color: #0056b3; /* Dunkleres Blau bei Hover */
        }
        .button:active {
            background-color: #0056b3; /* */
        }
        .button.operator {
            background-color: #0056a1; /* Dunkleres Blau für Operator-Tasten */
        }
        .button.operator:hover {
            background-color: #004080; /* Dunkleres Blau bei Hover */
        }
        .button.memory {
            background-color: #008080; /* Türkis für Speicher-Tasten */
        }
        .button.memory:hover {
            background-color: #006666; /* Dunkleres Türkis bei Hover */
        }
        .button.clear {
            background-color: #dc3545; /* Rot für die Löschtaste */
        }
        .button.clear:hover {
            background-color: #c82333; /* Dunkleres Rot bei Hover */
        }
        .equal-button {
            background-color: #17a2b8; /* Türkis für die Gleich-Taste */
            width: 100%;
            height: 38px; /* Höhe erhöht */
            font-size: 20px;
            margin: 2px 0; /* Höhe verringert */
            color: white;
            border-radius: 5px;
            border: none;
            cursor: pointer;
        }
        .equal-button:hover {
            background-color: #00bfff; /* Hellblau bei Hover */
        }
        .drehzahl-container {
            margin-top: 10px; /* Höhe verringert */
            padding: 10px;
            border-top: 1px solid #ccc;
        }
        .input-container {
            display: flex;
            justify-content: space-between;
            margin: 8px 0; /* Höhe verringert */
            align-items: center; /* Vertikale Ausrichtung */
        }
        input[type="number"], input[type="text"] {
            height: 35px; /* Höhe erhöht */
            font-size: 14px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f8f9fa; /* Heller Hintergrund für Eingabefelder */
        }
        label {
            display: flex;
            align-items: center;
            margin-right: 5px; /* Höhe verringert */
        }
        .slider-container {
            width: 100%;
            margin-top: 5px; /* Höhe verringert */
        }
        #vcSlider, #fzSlider, #zSlider, #kfSlider, #lmSlider, #dSlider {
            width: 100%; /* Slider auf volle Breite gesetzt */
            margin-top: 6px;
        }
        .scale {
            display: flex;
            justify-content: space-between;
            margin-top: 3px; /* Höhe verringert */
            font-size: 12px;
        }
        .rpm-result {
            text-align: center;
            font-size: 14px;
            margin-bottom: 6px; /* Höhe verringert */
            background: #fdffdf; /* Gelber Hintergrund für Ergebnisse */
            height: 22px;
            padding-top: 6px; /* Klebt sonst oben */
        }
        .footer {
            font-size: 10px;
            text-align: center;
            margin-top: 10px; /* Höhe verringert */
        }
        h3 {
            font-size: 24px;
        }
        h4 {
            margin: 5px 0; /* Höhe verringert */
            font-size: 20px;
            background: linear-gradient(90deg, #007BFF, #00BFFF); /* Farbverlauf für Überschriften */
            color: white;
            padding: 10px; /* Höhe verringert */
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .MT22 {
            font-size: 44px;
        }
        .button-group {
            display: flex;
            justify-content: space-between;
        }
        #currentMemoryValue {
            width: 98%;
            height: 30px; /* Höhe verringert */
            font-size: 16px;
            text-align: center;
            margin-bottom: 5px; /* Höhe verringert */
            border: 1px solid #00adad;
            border-radius: 5px;
            background-color: #f8f9fa; /* Heller Hintergrund für den aktuellen Speicherwert */
        }
        .small-button {
            font-size: 12px;
        }
        .big-button {
            font-size: 24px;
            width: 60px; /* Breite des kleinen Buttons */
            height: 42px; /* Höhe des kleinen Buttons */
        }
        .help-box {
            display: none;
            background: #ffffff; /* Weißer Hintergrund für Hilfe-Box */
            border: 1px solid #007BFF;
            padding: 10px; /* Höhe verringert */
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            margin-top: 10px; /* Höhe verringert */
            width: 350px; /* Breite erhöht */
            color: #333;
            position: relative;
        }
        .result-container {
            font-size: 10px;
            background: #ffffff; /* Weißer Hintergrund für Ergebnis-Container */
            padding: 2px;
            color: #333;
        }
        .help-box strong {
            display: block;
            margin-bottom: 5px; /* Höhe verringert */
            font-size: 16px;
            color: #007BFF;
        }
        .help-box h5 {
            margin: 5px 0; /* Höhe verringert */
            font-size: 14px;
        }
        .help-box ul {
            margin: 0;
            padding-left: 15px;
            font-size: 10px;
        }
        .help-box li {
            margin-bottom: 3px; /* Höhe verringert */
        }
        .shift-right2px {
            transform: translateX(2px);
        }
        .shift-right4px {
            transform: translateX(4px);
        }
        .shift-right6px {
            transform: translateX(6px);
        }
        .shift-right8px {
            transform: translateX(8px);
        }
        .shift-right10px {
            transform: translateX(10px);
        }
        .shift-left2px {
            transform: translateX(-2px);
        }
         .shift-left4px {
            transform: translateX(-4px);
        }
         .shift-left6px {
            transform: translateX(-6px);
        }
         .shift-left8px {
            transform: translateX(-8px);
        }
         .shift-left10px {
            transform: translateX(-10px);
        }
        .shift-left30px {
            transform: translateX(-30px);
        }
        .shift-down0px {
            transform: translateY(0px);
        }
        .shift-down2px {
            transform: translateY(2px);
        }
        .shift-down4px {
            transform: translateY(4px);
        }
        .shift-down6px {
            transform: translateY(6px);
        }
        .shift-down8px {
            transform: translateY(8px);
        }
        .shift-down10px {
            transform: translateY(10px);
        }
        .shift-down12px {
            transform: translateY(12px);
        }
        .shift-up2px {
            transform: translateY(-2px);
        }
        .spacer-large {
            height: 3px; /* Höhe verringert */
        }    
        .spacer-extra-large {
            height: 28px; /* Höhe verringert */
        }     
        .result-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px; /* Höhe verringert */
        }
        .vf-calculation {
            display: none;
            margin-top: 10px; /* Höhe verringert */
            padding: 10px;
            border: 1px solid #007BFF; /* Blau für den Rahmen */
            border-radius: 5px;
            background: #f9f9f9; /* Heller Hintergrund für die Vorschubgeschwindigkeit-Berechnung */
        }
        #vfResult {
            font-size: 16px;
            color: #333;
            background: #fdffdf; /* Gelber Hintergrund für das Vorschubgeschwindigkeits-Ergebnis */
        }
        .button-small {
            width: 40px; /* Breite der kleinen Buttons */
            height: 40px; /* Höhe der kleinen Buttons */
            font-size: 18px;
            margin: 0 2px; /* Höhe verringert */
            cursor: pointer;
        }
        hr.style1 {
            border-top: 1px solid #8c8b8b;
            width: 100%;
            margin-bottom: 10px; /* Höhe verringert */
        }
        .summary-container {
            display: none; /* Standardmäßig versteckt */
            margin-top: 10px; /* Abstand zum oberen Bereich */
            padding: 10px;
            border: 1px solid #007BFF; /* Blau für den Rahmen */
            border-radius: 5px;
            background: #f9f9f9; /* Heller Hintergrund für die Zusammenfassung */
        }
        .result-table {
            font-size: 12px;
            width: 100%;
            border-collapse: collapse;
        }
        .result-table th, .result-table td {
            font-size: 12px;
            padding: 5px;
            text-align: left; /* Nach links ausrichten */
        }
        .result-table th {
            font-size: 12px;
            background-color: #007BFF;
            color: white;
        }
        .highlight {
            height: 50px;
            background-color: #d0e7ff; /* Leichte Hintergrundfarbe für das Highlight */
            transition: background-color 0.3s; /* Übergangseffekt */
        }
        .highlight:hover {
            background-color: #a0d1ff; /* Hintergrundfarbe beim Hover */
        }
        /* Neu hinzugefügt */
        .result-field {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 6px 0;
            padding: 6px;
            background-color: #ffffff;
            border: 1px solid #007BFF;
            border-radius: 5px;
            width: calc(100% - 20px);
        }
        .result-field h5 {
            margin: 4px 0;
            font-size: 16px;
            color: #007BFF;
        }
        .result-field p {
            font-size: 14px;
            margin: 0;
        }
          @media print {
            body {
                font-size: 10px !important; /* Schriftgröße für den Druck */
                line-height: 1.2; /* Optional: Zeilenhöhe anpassen */
            }
          
        }
            * {
            text-transform: none; /* Setzt alle Texte auf die Standardform zurück */
        }
    }