body {
    margin:0;
    font-family:Arial;

}

/* LAYOUT */
#container {
    display:flex;
    height: 100vh; /* 🔥 NEU */

}


#left {
    width:320px;
    border-right:2px solid #444;
    padding:10px;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
}

#right {
    display:flex;
    flex-direction: column;
    align-items: stretch;  /* 🔥 statt flex-start */
    position: relative;
    flex: 1;               /* 🔥 NEU */
    background-color: #f4f4f4;
}





/* MENÜ */
#menuBar {
    display:flex;
    gap:6px;
    margin-bottom:8px;
}

#menuBar button {
    flex:1;
    height:40px;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

/* Restore-Button: im Stil der anderen Menü-Buttons halten */
.restore-btn {
    /* höhere Spezifität, damit es in allen Browsern genauso wie die anderen Menü-Buttons aussieht */
    background: #e6e6e6;
    border: 1px solid #999;
    border-radius: 4px;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 40px;     /* explizit wie die anderen Buttons */
    font-size: 20px;  /* explizit wie die anderen Buttons */
}
.restore-btn svg {
    width: 1em;      /* passt zur font-size der Buttons (20px) */
    height: 1em;
    display: block;
    overflow: visible; /* wichtig für sichtbares Plus in manchen Browsern (Firefox) */
}

/* zusätzliche hochspezifische Regel falls Browser-Defaults andere Stile erzwingen */
#menuBar > button.restore-btn { background: #e6e6e6; border: 1px solid #999; }

.restore-trash { display:inline-block; }

/* EDITOR: Wrapper / Line Numbers / Background / Textarea */
#editorWrapper {
    display:flex;
    flex:1;
    min-height:0;
    border:1px solid #ccc;
    margin-bottom:8px;
    overflow:hidden;
    position:relative; /* wichtig für overlay */
}

/* Zeilennummern: scrollbar & fixe Breite */
#lineNumbers {
    width:40px;
    background:#eee;
    text-align:right;
    font-family:monospace;
    font-size:14px;
    overflow-y:hidden;
    overflow-x:hidden;
    border-right:1px solid #ddd;
    padding:2px;
    padding-left:2px;
    padding-top:0px;
    box-sizing:border-box;
    bottom:0;
}

#lineNumbers div {
    transition: height 0.25s ease;
}

/* Hintergrund-Layer: liegt hinter der textarea und zeigt farbige Zeilen */
#editorBackground {
    position:absolute;
    left:40px;    /* gleiche Breite wie #lineNumbers */
    right:0;
    top:0;
    bottom:0;
    z-index:1;
    pointer-events:none; /* keine Mausinteraktion */
    overflow:hidden;
    white-space:nowrap;
}

/* einzelne Hintergrund-Zeile */
.bgLine {
    height:20px;
    box-sizing:border-box;
    transition: height 0.25s ease;
}

/* Textarea über dem Hintergrund */
#codeEditor {
    position: absolute;
    left:40px;
    right:0;
    top:0;
    bottom:0;
    border:none;
    outline:none;
    font-family:monospace;
    font-size:14px;
    padding-top:1px;
    padding-bottom:3px;
    resize:none;
    line-height:20px;   /* muss mit .bgLine.height übereinstimmen */
    tab-size:2;
    z-index:2;
    background:transparent; /* transparent, damit background sichtbar ist */
    color: #000;
    overflow:auto;
    white-space:pre;

}

/* Error arrow style */
.errorArrow {
    color: #c0392b; /* dunkelrot */
    font-weight: 700;
    font-size: 14px;
    margin-right: 4px;
    user-select: none;
}

/* Out-of-bounds arrow (orange) */
.errorArrowOut {
    color: #d35400; /* orange */
    font-weight: 700;
    font-size: 14px;
    margin-right: 4px;
    user-select: none;
}

/* BUTTONS */
#buttons {
    display:flex;
    gap:5px;
    margin-bottom:8px;
}

#buttons button {
    flex:1;
}

/* PALETTE */
#palette {
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:5px;

    margin-top:auto;
}

.colorRow {
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11px;
    cursor:pointer;
    padding: 4px;
    border-radius: 3px;
    transition: background 0.1s;
}

.colorRow:hover {
    background: #f0f0f0;
}

.colorBox {
    width:14px;
    height:14px;
    border:1px solid black;
    border-radius: 2px;
}

/* kleine Collapse-Button-Stile */
.collapseBtn {
    cursor:pointer;
    font-size:12px;
    user-select:none;
    width:15px;
    text-align:center;
}

.collapseBtn:hover {
    background:#ddd;
    border-radius:2px;
}

#bottom-area {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

#top-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    min-height: 0;   /* ✅ wichtig */
}

#uml-overlay {
    position: relative; /* wichtig für absolute Positionierung der Klassen */
    z-index: 1000;
    pointer-events: auto;
    bottom: 0;
    left: 0;
    right: 0;

    height: 150px;
    overflow: hidden;

    display: flex;
    align-items: flex-start;
    box-shadow: 0 -6px 15px rgba(0,0,0,0.15);
    transition: height 0.35s ease, transform 0.35s ease;
}

/* Hover = ganzer Bereich expandiert */
/* Hover = ganzer Bereich expandiert */
#uml-overlay:hover {
    height: 340px;
    overflow: visible;

    transform: translateY(-80px); /* 🔥 DAS löst dein Problem */
}

/* Klasse, die durch JS gesetzt wird, damit wir mit Timeout öffnen/schließen können */
#uml-overlay.hover-open {
    height: 340px !important;
    overflow: visible !important;
    transform: translateY(-80px) !important;
}

/* Panel-Mode classes (controlled via JS)
   - mode-open: immer ausgeklappt
   - mode-closed: immer eingeklappt
   - mode-dynamic: Standard (hover öffnet)
*/
#uml-overlay.mode-open {
    height: 340px !important;
    overflow: visible !important;
    transform: translateY(-80px) !important;
}

/* In 'closed' zeigen wir die Attribute (keine Methoden) */
#uml-overlay.mode-closed {
    height: 160px !important; /* zeigt Klassenname + Attribute */
    overflow: hidden !important;
    transform: translateY(0) !important;
}

/* Neuer Modus: komplett verstecken (Klassenkarten verschwinden) */
#uml-overlay.mode-hidden {
    height: 40px !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
}

#uml-overlay.mode-dynamic {
    /* keine Änderung: Verhalten über :hover */
}

/* Toggle-Button (klein, schmal) - Position innerhalb des rechten Panels */
/* Er ist ein Kind von #right, daher absolute Positionierung relativ zu #right
   (damit er nur im rechten Panel sichtbar ist und nicht am gesamten Viewport klebt). */
.panelToggleBtn {
    position: absolute; /* relativ zu #right */
    left: 2px; /* Abstand von Trennlinie: 2px */
    bottom: 12px; /* Abstand vom unteren Rand des rechten Panels */
    transform: none;
    top: auto;
    width: 36px; /* größere Tap-Fläche für Touch */
    height: 36px; /* größere Tap-Fläche für Touch */
    padding: 0;
    font-size: 16px; /* leicht größere Icon-Größe */
    line-height: 1;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.6);
    background: white;
    cursor: pointer;
    z-index: 9999; /* hoch genug innerhalb des Panels */
    display: flex;
    align-items: center;
    justify-content: center;
}

.panelToggleBtn:hover {
    background: #f0f0f0;
}

/* Kleine Variationen für die Symbole */
.panelToggleBtn.open { }
.panelToggleBtn.closed { }
.panelToggleBtn.dynamic { }

.panelToggleBtn.hidden { }

/* Pfeil-Styles für einheitliche Optik */
.panelToggleBtn .arrow { display:block; font-size:13px; line-height:1; }
.panelToggleBtn .arrow.up { transform: translateY(-1px); }
.panelToggleBtn .arrow.down { transform: translateY(0); }
.panelToggleBtn .arrow-stack { display:flex; flex-direction:column; gap:0; line-height:0.85; }
.panelToggleBtn .arrow-stack span { display:block; font-size:10px; line-height:10px; }

#rulerTop {
    height: 20px;
    width: 800px;
    display: block;

    border-bottom: 1px solid #999;
    background-color: #f4f4f4; /* Lineale */
}

#rulerLeft {
    width: 30px;
    height: 600px;
    background-color: #f4f4f4;
    border-right: 1px solid #999;
    background-color: #f4f4f4; /* Lineale */
    display: block;
}

#mainCanvas {
    display: block;
    width: 800px;
    height: 600px;
    background: white;
    background-color: white;   /* Zeichenfläche */
    display: block;
    z-index: 10;
}


#canvasWrapper {
    position: relative;
    flex: 1;
    background-color: #f4f4f4;

    background-image:

        /* ✅ Loch für Logo */
            radial-gradient(
                    circle at calc(100% - 250px) 50%,
                    #f4f4f4 0px,
                    #f4f4f4 210px,
                    transparent 211px
            ),

                /* ✅ POCoS-Muster */
            url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='260' height='160'>\
  <text x='20' y='60' font-size='26' fill='black' opacity='0.08'>POCoS</text>\
  <text x='120' y='130' font-size='26' fill='black' opacity='0.08'>POCoS</text>\
</svg>");

    background-repeat: no-repeat, repeat;
    background-size: auto, 260px 160px;
}


#rulerRow {
    display: flex;
    align-items: flex-start;
    flex: 1;   /* ✅ WICHTIG */
}




.uml-class:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}


.class-name.uml-class-hover {
    background-color: rgba(255, 230, 120, 0.8);
}


/* Klassenname (grau hinterlegt) */
.class-name {
    font-size: 12px;
    cursor: pointer;
    padding: 4px;

    font-weight: bold;
    text-align: center;

    background: #e6e6e6;   /* 🔥 neu */
    border-bottom: 1.5px solid black;
    transition: background 0.2s ease;

}

/* Attribute */
.class-attributes,
.class-methods {

    line-height: 16px;
    padding: 4px;
    font-family: monospace;

    border-bottom: 1px solid black;

    transition: all 0.25s ease;

}




/* Methoden brauchen keine Border */
.class-methods {
    border-bottom: none;
}

/* Beim Hover sichtbar */
/* Beim Hover sichtbar (Standard/dynamic/open) */
#uml-overlay:hover .class-attributes,
#uml-overlay:hover .class-methods {
    opacity: 1;
    transform: translateY(0);
}

/* In closed mode: Methoden für alle Klassen ausblenden, AUSSER für die Gruppenkarte
   Die Gruppenkarte zeigt so viele Methoden, wie in den verfügbaren Platz passen (overflow hidden/auto).
*/
#uml-overlay.mode-closed .uml-class:not(#gruppe-card) .class-methods {
    display: none;
}
#uml-overlay.mode-closed .class-attributes {
    opacity: 1;
}

/* Gruppe: in closed mode Methoden begrenzen, aber nicht komplett verstecken */
#uml-overlay.mode-closed #gruppe-card .class-methods {
    display: block;
    max-height: 80px; /* passt ca. 3-5 Zeilen, je nach Font-size */
    overflow: auto;
}

/* In hidden mode: Zeige schmale Leiste mit Klassennamen (Objektkarte bleibt sichtbar) */
#uml-overlay.mode-hidden {
    height: 40px !important;
    overflow: hidden !important;
    transform: translateY(0) !important;
}

#uml-overlay.mode-hidden #uml-classes {
    display: flex !important;
    gap: 8px;
    align-items: center;
    padding-right: 10px;
    height: 100%;
    overflow-x: auto;
}

#uml-overlay.mode-hidden .uml-class {
    width: 110px;
    height: 30px;
    overflow: hidden;
    /* gleiche Rahmenfarbe wie im ausgeklappten Zustand */
    border: 1px solid black;
    background: white;
}

#uml-overlay.mode-hidden .class-attributes,
#uml-overlay.mode-hidden .class-methods {
    display: none;
}

#uml-overlay.mode-hidden .class-name {
    padding: 6px 4px;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


   #uml-tooltip {
       position: fixed;
       z-index: 2000;
       background: #2b2b2b;
       color: #f0f0f0;

       padding: 8px;
       border-radius: 6px;

       font-size: 12px;
       font-family: monospace;

       max-width: 240px;

       pointer-events: none;
       z-index: 5000;

       display: none;

       white-space: pre-line; /* 🔥 wichtig für \n */
   }

.uml-hover-line {
    background: rgba(255, 235, 100, 0.6);
}

#pauseBtn {
    padding: 6px 12px;
    cursor: pointer;
}

/* ✅ Zustand: Weiter (Pause aktiv) */
#pauseBtn.active {
    background-color: #007bff;
    color: white;
}


/* Objektkarte links fix */
#object-card {
    border-radius: 10px;
    min-width: 170px;
    border: 1px solid black;
    background: white;
    overflow: hidden;
    flex-shrink: 0;
    display: none; /* standardmäßig versteckt */
    margin-left: 28px; /* näher an den linken Button herangerückt */


    pointer-events: auto !important;
    position: relative;
    z-index: 99999;
}

/* Responsive: auf schmalen Viewports den Abstand verkleinern */
@media (max-width: 600px) {
    /* Auf engen Viewports weiterhin innerhalb des rechten Panels positionieren */
    .panelToggleBtn { left: 8px; bottom: 8px; width: 34px; height: 34px; font-size:14px }
    #object-card { margin-left: 12px; min-width: 140px; }
    #uml-overlay.mode-hidden .uml-class { width: 90px; }
}




/* Attributbereich */
#object-card .class-attributes {
    padding: 4px;
}

/* Zeilen */
#object-card .uml-line {
    font-size: 10px;
}


/* Klassen = eckig */
.uml-class {
    border: 1px solid black;
    background: white;
    width: 170px;
    font-size: 12px;
    border-radius: 0;   /* ✅ eckig */
}


/* Klassenblock rechts */
#uml-classes {
    margin-left: auto;
    display: flex;
    gap: 12px;
    padding-right: 10px; /* Abstand zum Rand */
}
#lineNumbers div,
.bgLine {
    transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* ✅ spezielle Optik für Gruppe */
#gruppe-card {
    border-radius: 0;
    margin-left: 10px;

    border: none;
    position: relative;
}

#gruppe-card::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
            repeating-linear-gradient(
                    to right,
                    #666 0px,
                    #666 8px,        /* ✅ Länge der Striche */
                    transparent 8px,
                    transparent 14px /* ✅ Abstand */
            ) top,

            repeating-linear-gradient(
                    to right,
                    #666 0px,
                    #666 8px,
                    transparent 8px,
                    transparent 14px
            ) bottom,

            repeating-linear-gradient(
                    to bottom,
                    #666 0px,
                    #666 8px,
                    transparent 8px,
                    transparent 14px
            ) left,

            repeating-linear-gradient(
                    to bottom,
                    #666 0px,
                    #666 8px,
                    transparent 8px,
                    transparent 14px
            ) right;

    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-repeat: no-repeat;
}
/* Gruppe: Separatoren gestrichelt statt durchgehender Linie */
#gruppe-card .class-name {
    border-bottom: 1px dashed #666;
}

#gruppe-card .class-attributes {
    border-bottom: 1px dashed #666;
}
#right:fullscreen #rulerRow {
    margin: 0;
}

#right:fullscreen #canvasWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* =========================
   ✅ Vollbild-Modus (robust)
========================= */

#right.fullscreen-mode #rulerTop,
#right.fullscreen-mode #rulerLeft,
#right.fullscreen-mode #uml-overlay {
    display: none !important;
}

/* Canvas zentrieren */
#right.fullscreen-mode #canvasWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* =========================
   ✅ Hilfedatei
========================= */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
}

.modal-content {
    background: white;
    margin: 5% auto;
    padding: 20px;
    width: 80%;              /* ✅ breit */
    max-height: 80%;
    overflow-y: auto;
    border-radius: 8px;
    font-family: monospace;
    white-space: pre-wrap;
}

.close {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

#helpModal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#helpBox {
    background: white;
    width: 80%;
    max-height: 80%;
    padding: 20px;
    border-radius: 10px;
    overflow-y: auto;
    font-family: monospace;
}

/* ✅ DAS IST DEIN 2-SPALTEN-FIX */
#helpText {
    column-count: 3;
    column-gap: 40px;
    white-space: pre-wrap;
}


/* ✅ Wasserzeichen */
#canvasWrapper::after {
    content: "";
    z-index: 3;

    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);

    width: 400px;
    height: 400px;

    opacity: 0.08;
    pointer-events: none;

    background-image: url("pocos.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 240px;
}




    background-repeat: no-repeat;
    background-size: contain;
}


/* ✅ Wasserzeichen im Vollbild AUSBLENDEN */
/* ✅ Vollbild: KEINE Wasserzeichen */
#right.fullscreen-mode #canvasWrapper {
    background-image: none !important;
}

#right.fullscreen-mode #canvasWrapper::before,
#right.fullscreen-mode #canvasWrapper::after {
    content: none !important;
    display: none !important;
}
#right.fullscreen-mode #canvasWrapper .logo-mask {
    display: none !important;
}

/* Geänderte Attributwerte in der Objektkarte */
#object-card .uml-line.object-card-changed {
    font-weight: bold !important;
    color: blue !important;
}

/* Highlighting für Objektkarten-Zeilen beim Mouseover */
#object-card .uml-line.object-card-hover {
    background: rgba(255, 235, 100, 0.6);
}

/* Blauer Pfeil für geänderte Attribute (ähnlich wie errorArrow) */
.changeArrow {
    color: blue;
    font-weight: 700;
    font-size: 14px;
    margin-left: 8px;
    user-select: none;
    cursor: help;
    float: right;
}

/* Custom Tooltip für geänderte Attribute */
.object-card-tooltip {
    position: absolute;
    background: rgba(200, 220, 255, 0.8); /* blass hellblau hinterlegt */
    color: #000;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: Arial;
    pointer-events: none;
    z-index: 3000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    white-space: normal; /* Mehrzeiliger Text */
    display: none;
    max-width: 170px; /* Maximale Breite der Objektkarte */
    word-wrap: break-word; /* Textumbruch */
    pointer-events: none;
}