.is-hidden {
      display: none;
    }

    /* Jedes "Werk" (Link + Balken + Aufklapptext) in eigenem Container.
       => Wir verwenden "onmouseenter" / "onmouseleave" am .werk,
          damit die Maus vom Link zum Balken fahren kann,
          ohne dass onmouseout am Link getriggert wird. */
    .werk {
      position: relative;
      margin-bottom: 1.5em;
      /* Der Hover-Effekt für den Balken wird
         via onmouseenter/onmouseleave im HTML initiiert. */
    }

    /* Link (Titel) selbst, inkl. +/−-Symbol */
    .werk-toggle {
      //background-color: #808080;
      color: #808080;
      font-weight: bold;
      padding: 0.0em 0.3em;
    }

    .werk-togglebottom {
      //background-color: #808080;
      color: #808080;
      font-weight: bold;
      padding: 0.0em 0.0em;
    }

    /* Das +/−-Symbol in Balken-Farbe.
       Für jeden Balken (z.B. nippel, google, nazi) verwenden wir
       eine eigene Klasse, damit das Zeichen in derselben Farbe wie der Balken
       erscheinen kann. */
    
    .sign-nippel { color: #DFDF00; }
    .sign-kleinvieh { color: #DB7402; }
    .sign-kairo   { color: #004080; }
    .sign-afd {color: #C6AC00;}
    .sign-bild {color: #1AB3FF;}
    .sign-hirn {color: #FF3E09;}
    .sign-bubble {color: #94D200;}
    .sign-taz {color: #E3288F;}
    .sign-zeh {color: #1A990B;}
    .sign-prag {color: #E72DFF;}
    .sign-google {color: #DB190F;}
    .sign-buero {color: #FFBB00;}
    .sign-psycho {color: #00BFBF;}
    .sign-schwindel {color: #FF77CF;}
    .sign-liola {color: #FF673C;}
    .sign-geist {color: #00DD00;}
    .sign-leiche {color: #3B5998;}
    .sign-bomb {color: #FF0000;};
    .sign-life {color: #B119CF;}
    .sign-bav {color: #F8DF00;}
    .sign-account {--hover-color: #00CCFF; color: #00CCFF;}
    .sign-bath {--hover-color: #FF8000; color: #FF8000;}
    .sign-world {--hover-color: #D20000; color: #D20000;}
    .sign-schwimm {--hover-color: #00CE00; color: #00CE00;}
    .sign-hilfe {--hover-color: #EB147A; color: #EB147A;}
    .sign-bombe {--hover-color: #0099FF; color: #0099FF;}
    .sign-schatz {color: #FBC900;}
    .sign-kampf {color: #90FF00;}
    .sign-wargla {color: #FF9300;}
    .sign-hallo {color: #1289BC;}
    .sign-kunst {color: #E3288F;}
    .sign-asking {color: #4C662B;}
    .sign-code {color: #0000ff;}
    
    

    /* Der farbige Balken:
       - Liegt ABSOLUT über dem Werk-Container.
       - bottom:100% => direkt über dem Link
    */
    .balken {
      position: absolute;
      bottom: 100%;
      left: 0;
      padding: 0.1em 0.1em;
      color: #FFFFF0;
      text-align: right;
      /* Balken bleibt unsichtbar via "display:none" (is-hidden),
         bis wir per JS klassenwechsel ein- oder ausblenden. */
    }
    /* Verschiedene Farben */
    .balken-nippel  { background-color: #DFDF00; width:600px;}
    .balken-kleinvieh  { background-color: #DB7402; width:500px;}
    .balken-kairo    { background-color: #004080; width:700px; }
    .balken-afd    { background-color: #C6AC00; width:650px; }
    .balken-bild    { background-color: #1AB3FF; width:600px; }
    .balken-hirn    { background-color: #FF3E09; width:720px; }
    .balken-bubble    { background-color: #94D200; width:740px; }
    .balken-taz    { background-color: #E3288F; width:840px; }
    .balken-zeh    { background-color: #1A990B; width:790px; }
    .balken-prag    { background-color: #E72DFF; width:790px; }
    .balken-google    { background-color: #DB190F; width:790px; }
    .balken-buero    { background-color: #FFBB00; width:690px; }
    .balken-psycho    { background-color: #00BFBF; width:620px; }
    .balken-schwindel    { background-color: #FF77CF; width:520px; }
    .balken-liola    { background-color: #FF673C; width:590px; }
    .balken-geist    { background-color: #00DD00; width:550px; }
    .balken-leiche    { background-color: #3B5998; width:650px; }
    .balken-bomb    { background-color: #ff0000; width:720px; }
    .balken-life    { background-color: #B119CF; width:790px; }
    .balken-bav    { background-color: #F8DF00; width:800px; }
    .balken-account    { background-color: #00CCFF; width:640px; }
    .balken-bath    { background-color: #FF8000; width:580px; }
    .balken-world    { background-color: #D20000; width:740px; }
    .balken-schwimm    { background-color: #00CE00; width:720px; }
    .balken-hilfe    { background-color: #EB147A; width:570px; }
    .balken-bombe    { background-color: #0099FF; width:780px; }
    .balken-schatz    { background-color: #FBC900; width:690px; }
    .balken-kampf    { background-color: #90FF00; width:690px; }
    .balken-wargla    { background-color: #FF9300; width:590px; }
    .balken-hallo    { background-color: #1289BC; width:760px; }
    .balken-kunst    { background-color: #E3288F; width:760px; }
    .balken-asking    { background-color: #4C662B; width:720px; }
    .balken-code    { background-color: #0000ff; width:750px; }



    /* Der Klick-aufklappbare Teil:
       Indem wir im Code .is-hidden togglen, 
       erscheint (−) + der Text. */
    .expand-body, .expand-stuck, .expand-wargla {
      margin-left: 5.0em;
      margin-top: 1.0em;
      margin-bottom: 2.5em;
      font-weight: normal;
      color: #808080;
      font-size: 0.8em;

    }

 


    .expand-projekte {
  /* ─── your original layout rules ─── */
  margin-left:   5.0em;
  margin-top:    2.0em;
  margin-bottom: 2.5em;
  font-weight:   normal;
  color:         #808080;
  font-size:     0.8em;

  /* ─── your new flex & image rules ─── */
  display:     flex;         /* lay out image + text in one row */
  flex-wrap:   nowrap;       /* never wrap text under the image */
  align-items: flex-start;   /* align tops of items */
  overflow:    hidden;       /* contain the block */
  gap:         1.5rem;       /* space between img and text */
}


.expand-projekte img {
  flex-shrink: 0;
  width:       150px;
  height:      auto;
}

.expand-projekte .text-wrapper {
  padding-top: 1em;
}

/* global override */
.expand-projekte.is-hidden {
  display: none !important;
}


    /* Wenn du etwas vom Balken-Farbton im expand-Text brauchst: */
    .text   { font-weight: bold; }

    body {font-size: 1.0em; font-family: arial,helvetiva, futura; min-width: 900px; margin:0px;}
    #duenn {font-size: 0.8em; font-weight: bold;}



A.hover:link {color: #808080; text-decoration: none; letter-spacing: 0mm}

A.hover:visited {color: #808080; text-decoration: none; letter-spacing: 0mm}

A.hover:active {color: #808080; text-decoration: none; letter-spacing: 0mm}

A.hover:hover {color: var(--hover-color); text-decoration: none; letter-spacing: 0mm}




    #su {display: inline;}
    #all {position: relative; width: 90%; left: 80px; float: left; font-size:16px;}
    #bild {visibility: hidden; position: absolute; width: 100%; left: 0px; float: left; font-size:16px; max-width: 900px;}
    #bildbild {font-size:30pt; background-color:#808080; color:#FFFFF0;}
    #vita {visibility: hidden; position: absolute; left: 320px; text-align: justify; float: right; font-size: 16px;}
    #runter {position:absolute; position: relative; width: 132%; left: 0px; float: left; font-size:16px; top:145px; background-color: #FF0000;}
    #klamm {width: 75%; min-width: 650px;}
    #down {position: absolute; top:260px; width: 100%; max-width:900px;}
                                                                                                                                                              
    #klammer {visibility: visible; width: 100%; position: absolute; top: 165px; max-width:900px;}
    #auswahl {font-size: 10pt; font-family: arial; color: #808080; float:left;}
    #engel {font-size: 10pt; font-family: arial; color: #808080; float:right;}


    #sus {font-size:30pt; background-color:#808080; color:#FFFFF0; width: 100%; float:left; max-width:900px;}
    #rechts {font-size:30pt; background-color:#fffff0; color:#808080; float: left; }



    A:link {color: #808080; text-decoration: none; letter-spacing: 1mm}

    A:visited {color: #808080; text-decoration: none; letter-spacing: 1mm}

    A:active {color: #808080; text-decoration: none; letter-spacing: 1mm}


    A.sus:link {text-decoration: none; letter-spacing: 0mm;}

    A.sus:visited {text-decoration: none; letter-spacing: 0mm;}

    A.sus:active {text-decoration: none; letter-spacing: 0mm;}


    A.sprache:link {font-size: 10pt; color: #808080; text-decoration: none; letter-spacing: 0mm}

    A.sprache:visited {font-size: 10pt; color: #808080; text-decoration: none; letter-spacing: 0mm}

    A.sprache:active {font-size: 10pt; color: #808080; text-decoration: none; letter-spacing: 0mm}

    A.sprache:hover {font-size: 10pt; color: #000000; text-decoration: none; letter-spacing: 0mm}